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

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

转载作者：可可西里更新时间：2023-11-01 13:20:22

27

4

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

之前:

之后:

我的 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/

27

4

0

文章推荐： c++ - DLL 可以调用/加载另一个 DLL 吗？

文章推荐： php - 我的 $_FILES 在哪里？ Ajax 上传

文章推荐： php - 使用 twitter API 时出现奇怪的字符和编码

文章推荐： c++ - Pointer-to-Pointer 在 Pointer 不存在的情况下崩溃

materialize - 在 sideNav 外部单击时禁止关闭 sideNav
我在我的应用程序中使用 MaterializeCSS 的 sideNav。我不想在点击外部时关闭 sideNav。它可以在这样的模态中实现: { dismissible: false } 如何在 si
javascript - sidenav 叠加在粘性导航栏上，sidenav 叠加的高度有问题
我对 sidenav 叠加层的高度有这个问题，我知道它与粘性导航栏的 javascript 混淆，但我不知道如何使 sidenav 的高度达到 100%。任何帮助将不胜感激! 代码如下:
javascript - SideNav - MaterializeCss - 绑定(bind)事件 sidenav 关闭
当 sidenav 关闭时，我找不到任何方法来绑定(bind)火的东西 ( http://materializecss.com/side-nav.html ) 我什至找不到相关的文档。其实我正在做一
html - 如果图像在 sidenav 中，则 Material Sidenav 会溢出内容
早上好! 我在我的 Angular 应用中使用 Material Design 侧边导航来为用户提供页面选择。侧面导航首先包含 Logo ，然后是用户可以选择的所有页面 - 如果他已登录。问题:如果
angular - mat-toolbar、mat-sidenav 和 mat-sidenav-container 不是已知元素
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
javascript - 使用 Material Angular 和 Leaflet 切换 sidenav 时调整 sidenav-content 的大小
我正在使用 Angular、Angular-Material 和 Leaflet 创建一个具有 sidenav 和 map 的网络。
angular - sidenav 生成已经声明结束的抽屉
我有以下代码: Settings
javascript - 带点滚动的 sidenav
我问了类似的问题，但没有得到答案，所以我会再试一次。我有一个网页。在此页面中，我试图用点制作侧面导航。网页被分成几个部分。我需要做到这一点，以便每次滚动到另一个部分时，该点都会改变颜色。例如:第一部分
javascript - $(...).sideNav 不是函数
我刚刚下载了 mdbootstrap。按照在网页上实现侧面导航的说明进行操作后，当我尝试初始化它时，出现以下错误: Uncaught TypeError: $(...).sideNav is not
javascript - 来自多个按钮的多个 Sidenavs？
我正在处理一个在屏幕右侧有五个图标的网站。在一个完美的世界中，点击每个图标都会打开其各自的 sidenav。例如: MyBtn onclick 打开 sidenav 并关闭所有其他 sideav。
javascript - Sidenav 栏应从右侧而不是左侧打开
我有一个简单的 javascript 可以为我打开一个侧边栏，但我希望它在右侧而不是左侧。请参阅下面的 gif 和代码。任何人都知道我需要做什么来解决这个问题？非常感谢您添加的任何解释，以便我更好地理
html - sidenav 内容不对齐
我的 sidenav 中的内容不在其容器内。它在 jsfiddle 中看起来不错，但在我的浏览器中却不行。 (Firefox 17.1 Ubuntu Quantal) jsfiddle
html - 如何删除母版页中的页眉和 sidenav？
我创建了一个母版页 - wrap.master，其中附有许多内容页。现在我想创建一个新的内容页面并附加到它上面。母版页有一个标题和侧面导航。但是在我的新内容页面中，我不想要标题和侧面导航。通常，我希望
javascript - sidenav 关闭时按钮不起作用
由于某些原因，我正在我的网站按钮上的登录页面上工作，当 sidenav 退出时提交按钮不可点击(我正在使用物化框架)。我对我的 sidenav 做了一些修改，这样当覆盖层出来时它就会被移除，并且在它
javascript - Sidenav 覆盖固定在右上角
大家好，我正在尝试让固定在右上角的导航来自屏幕的右侧(从右到左的动画)。现在使用来自 w3school 的示例，我能够想出以下代码:HTML: × About Services Cli
html - 点击打开reactjs sideNav
我试图在点击按钮时打开react sideNav栏。我指的是这些文章来做到这一点: https://github.com/gauravchl/react-simple-sidenav https://
具有双倍滚动内容的 Angular Material Sidenav
对于基于 Angular Material 的项目，我正在尝试使用 sidenav具有不同 View 可能性的组件，具体取决于用户的设备(台式机或手机)。到目前为止它有效，但有一些问题。也就是说，内容
angular - 在外部单击时关闭 mat-sidenav
每当用户点击不在侧边栏中的某个地方时，我都会尝试关闭侧边栏。我已经尝试过双向数据绑定(bind)，现在正在尝试 rxjs' Subject 应用模板应用组件 openedSubject = new
css - 如何禁用 sidenav 上的滚动
我想问我有一个显示隐藏菜单(openNav，closeNav) 这是我的 javascript : function openNav() { document.getElementById(
选项卡主体内的 Angular Material sidenav
像下面这样在 mat-tab 中加载 sidenav 是否有效？ Sidenav Main Content

首页

博学

6Ren·AI

商城

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