Question

我一直在尝试设计一个移动网站，而且我一直在使用W3schools作为指导。我成功地从W3Schools实现了一个简单的侧面菜单，但是，在移动视图中，它会在下方推送图像，而不是从屏幕上移开。

我如何改变这一点，因为我想推送屏幕div的所有内容而不是压缩它们。

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

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

迪安

Answer 1

使用margin-left:25%将（隐含的）宽度更改为75%，从而缩小内容区域。这会干扰您的文本布局以及图像的大小。

相反，请考虑使用transform:translateX(25%)甚至position:relative; left:25% - 这两者都会产生相同的结果：将内容移动宽度的25％（尽管以不同的方式）。

您当然需要根据需要将transition从margin-left 4s更改为transform .4s或left .4s。

Answer 2

Codepen demo

您可以通过多种方式实现此效果：在此示例中，基本思路是并排放置两个元素，其总宽度大于100％（例如使用flexbox）。

然后将否定margin-left应用于菜单元素（aside），以便将其置于屏幕外并将边距设置为0（使用CSS过渡）以显示它。

该按钮属于菜单元素，但它可视地放置在内容区域，其中absolute位置和负right偏移。

<强>标记

<div class="container">
  <aside class="menu">
    <button>☰</button>
  </aside>

  <main>
     <img src="..." /> 
     <p>Lorem ipsum dolor sit amet...</p>
  </main>
</div>

CSS （基本）

.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: -41px;
  line-height: 40px;
  width: 40px;
  border: 0;
  font-size: 2rem;
  background: none;
  cursor: pointer;
  transition: color .4s;
}

aside.visible {
  margin-left: 0; }

<强>的Javascript

let menu = document.querySelector('aside');
let menuBtt = menu.querySelector('button');

menuBtt.addEventListener('click', ()=>menu.classList.toggle('visible'));

如何推动元素＆＃34;关闭屏幕＆＃34;使用HTML和CSS

2 个答案: