javascript - 如何使用 HTML 和 CSS 推送元素 "off screen"

Question

我一直在尝试设计一个移动网站，并且一直在使用 W3schools 进行指导。我成功地从 W3Schools 实现了一个简单的侧面菜单，但是，当在移动 View 中时，它会将图像推到下方而不是离开屏幕。

我该如何更改它，因为我想推送屏幕 div 的所有内容而不是挤压它们。

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_shift - 这是我正在使用的示例。我想将汽车图像推离屏幕而不是将其缩小。

感谢您的帮助，我很感激。

院长

Answer 1

您可以通过多种方式实现此效果:在本例中，基本思想是并排放置两个总宽度大于 100% 的元素(例如使用 Flexbox)。

然后对菜单元素 (aside) 应用负的 margin-left，以便将其放置在屏幕外，并将边距设置为 0 >(使用 CSS 过渡)来显示它。

该按钮属于菜单元素，但它在视觉上放置在内容区域上，具有绝对位置和负右偏移量。

<小时/>

let menu = document.querySelector('aside');
let menuBtt = menu.querySelector('button');
menuBtt.addEventListener('click', ()=>menu.classList.toggle('visible'));
                      

.container {
  overflow-x: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

aside, main { 
  box-sizing: border-box; }

aside {  
  position: relative;
  min-width: 250px; 
  margin-left: -250px;
  transition: margin .4s; }

main  {  min-width: 100%;  }

aside button {
  position: absolute;
  z-index: 1;
  right: -50px;
  top: 0;
  line-height: 40px;
  width: 40px;
  border: 0;
  font-size: 2rem;
  background: none;
  cursor: pointer;
  transition: color .4s;
}

aside.visible {
  margin-left: 0; 
}



aside.visible button {
   color: #62616c; }






aside  { background: #f2f2f2; font: 1.1rem/1.3 Arial; padding: 10px; }
aside button:focus { outline: 0; }
h2 { margin: 0; }
main { font: 0.9rem/1.6 Arial; padding: 60px 20px; }
main img { width: 100%;}

<div class="container">
  <aside class="menu">
    <button>&#x2630;</button>
    
     <h2>Main Menu</h2>
     
   </aside>

  <main>
     <img src="http://placekitten.com/500/320" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac dictum justo. Integer venenatis orci sed nulla malesuada finibus. Maecenas tellus metus, porta nec euismod quis, pellentesque vitae enim. Pellentesque id metus condimentum, aliquet lorem eget, pretium magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus leo id turpis interdum, eu fermentum elit auctor. Nulla ornare accumsan elit a scelerisque. Nam a dolor nec orci condimentum dignissim ac eget justo. Donec ligula quam, sagittis vel pretium et, auctor at odio. Quisque laoreet feugiat elit. Mauris sit amet urna vel risus mattis pharetra.</p>
  </main>
</div>