个人中心
gpt4 book ai didi

javascript - CSS + JS – 在 sidenav 打开时向右推送主体而不调整图像大小

转载 作者：可可西里 更新时间：2023-11-01 13:20:22 28 4
gpt4 key购买 nike

当我点击我的汉堡包菜单时，我试图将我的整个页面推送到正确的位置，但是当我这样做时，我的图像会调整大小，以及所有设置为 margin: 0 auto; 导致这些元素偏离 View 的中间。是否有解决方法可以将页面的所有内容推到右侧，使它们溢出 View 而不是调整大小？很想远离 jQuery，而只使用 Vanilla JS 来做这件事。

之前: enter image description here

之后: enter image description here

我的 CSS:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: margin-left .5s;
}
.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

我的 HTML:

<body>
    <!-- Sidenav -->
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Visit</a>
      <a href="#">Catering</a>
      <a href="#">Wholesale</a>
      <a href="#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id="main">
      <!-- Header -->
      <header>
        <nav>
          <div class="row">
            <ion-icon name="menu" id="hamburger" onclick="openNav()"></ion-icon>
            <%= link_to image_tag("blue_filled_mark1.png", :alt => "Valor Logo", :id => "main-logo"), root_path %>
          </div>
        </nav>
      </header>

      <section class="hero-container">
        <div class="hero">
        </div>
      </section>
    </div>
 </body>

我的Javascript:

function openNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";

在此先感谢您的帮助。

最佳答案

当您增加#main 容器的左边距时，您实际上是在减小它的可用宽度以呈现它的子级。相反，您可以使用 position: relative; left: 250px 将 #main div“推”到右边而不改变它的宽度:

function openNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.left = "250px";
}

function closeNav() { // eslint-disable-line no-unused-vars
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.left = "0";
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: all .5s ease-out;
  position: relative;
  left: 0;
}
.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("https://us.123rf.com/450wm/stockbroker/stockbroker1506/stockbroker150603180/42131668-family-buying-fresh-vegetables-at-farmers-market-stall.jpg?ver=6");
  background-repeat: no-repeat;
  background-size: 100%;
}

.row {
  background: #222;
  color: #FFF;
  padding: 15px;
}

.row span {
  cursor: pointer;
}

.row span:hover {
  text-decoration: underline;
}
<!-- Sidenav -->
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Visit</a>
      <a href="#">Catering</a>
      <a href="#">Wholesale</a>
      <a href="#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id="main">
      <!-- Header -->
      <header>
        <nav>
          <div class="row">
            <span name="menu" id="hamburger" onclick="openNav()">Open Menu</span>
          </div>
        </nav>
      </header>

      <section class="hero-container">
        <div class="hero">
        </div>
      </section>
    </div>

关于javascript - CSS + JS – 在 sidenav 打开时向右推送主体而不调整图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50936510/

28 4 0
文章推荐： c++ - DLL 可以调用/加载另一个 DLL 吗？
文章推荐： php - 我的 $_FILES 在哪里？ Ajax 上传
文章推荐： php - 使用 twitter API 时出现奇怪的字符和编码
文章推荐： c++ - Pointer-to-Pointer 在 Pointer 不存在的情况下崩溃
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com