Question

当我单击汉堡包菜单时，我试图将页面的整个页面正确推入，但是当我这样做时，图像的大小以及设置为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";

预先感谢您的帮助。

Answer 1

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

Answer 2

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

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>

Answer 3

选项1： 将.hero背景大小更改为“ 100vw”，而不是100％。

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

选项2：：将#main的宽度设置为“ 100vw”

#main {
  transition: margin-left .5s;
  width: 100vw
}

由于未明确设置，因此在左边增加空白边距会减小#main的宽度。因为使用百分比来调整背景大小是相对于父容器而言的，所以背景图像会缩小以适合新的#main大小。 “ vw”单元本质上是相同的，除了它相对于视口与父元素是相对的。（See a good explanation of VW here）。将背景设置为固定大小（选项1）会强制宽度保持在视口的100％，即使父对象缩小也是如此。将父元素（#main）设置为固定大小（选项2）也可以。

希望这会有所帮助！

Answer 4

这是一个主意：

html：

$query = "SELECT $tbl.photoID, $tbl.photoSRC, $tbl.photoCredit, $joinsTbl.categoryID,  
      GROUP_CONCAT($catsTbl.photo_category SEPARATOR ',') AS categories
      FROM $tbl
      LEFT JOIN $joinsTbl
      INNER JOIN $catsTbl
         ON $joinsTbl.categoryID = $catsTbl.categoryID
         ON $tbl.photoID = $joinsTbl.photoID
      GROUP BY $tbl.photoID
      LIMIT 100";

css：

<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 + JS –在sidenav打开时将主体向右推，而无需调整图像大小

4 个答案: