问CSS + JS -在sidenav打开时向右推送正文，而不调整图像大小
EN

Stack Overflow用户

提问于 2018-06-20 04:32:56

回答 3查看 451关注 0票数 3

当我点击汉堡菜单时，我试图将整个页面向右推，但当我这样做时，我的图像会调整大小，所有设置为margin: 0 auto;的内容都会导致这些元素偏离视图中间。有没有什么办法可以把页面的所有内容都推到右边，让它们溢出到视图之外，而不是调整大小？我希望远离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";

提前感谢你的帮助。

javascript

html

css

responsive-design

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-20 05:37:26

当你增加你的#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>

票数 2

Stack Overflow用户

发布于 2018-06-20 04:51:50

尝试在.hero上设置background-size: auto 100%

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";
}

.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("https://cdn-image.departures.com/sites/default/files/styles/responsive_900x600/public/take-me-to-madison-avenue_2000x1333.jpg?itok=gN5iGEtX");
  background-repeat: no-repeat;
  background-size: auto 100%;
}

<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">
          <b name="menu" id="hamburger" onclick="openNav()">menu</b>
          
        </div>
      </nav>
    </header>

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

票数 0

Stack Overflow用户

发布于 2018-06-20 05:34:03

这是一个想法：

html：

<body>
  <div class="body-wrap">
    <!-- 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>
  </div>
 </body>

css：

.sidenav{
  width: 200px; /*or whatever width you want*/
  left: -200px;
  position: fixed;
}

.sidenav.open{
  left: 0;
}

.body-wrap {
  position: relative;
  left: 0;
  overflow: hidden;
}
.body-wrap.open {
  left: 200px;
}

然后，在你的点击事件上，只需打开和关闭你的开放类。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50936510

复制

相似问题

问CSS + JS -在sidenav打开时向右推送正文，而不调整图像大小
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS + JS -在sidenav打开时向右推送正文，而不调整图像大小EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS + JS -在sidenav打开时向右推送正文，而不调整图像大小
EN