单击汉堡包图标时如何下推菜单内容？

Question

I want my hamburger icon to push down the content, meaning the background and writing when the hamburger icon is clicked on. 我希望我的汉堡图标下推内容，即单击汉堡图标时的背景和文字。 I tried to add padding to the body and set the width to the hamburger but does not seem to be working. 我试图在身体上添加填充物并将汉堡包的宽度设置为正确，但似乎不起作用。 I have been trying for the last couple hours. 我已经尝试了最近几个小时。 I only want to use CSS if possible. 如果可能，我只想使用CSS。

 .mobile-nav { position: fixed; top: 0; right: 0; text-align: right; padding: 10px; background: var(--bg-color); width: 100vw; z-index: 2; } .mobile-nav .menu { display: flex; text-align: center; justify-content: center; display: none; } .mobile-nav .menu ul li { list-style: none; padding: 0.1rem; font-size: 1.2rem; } .mobile-nav #toggle { display: none; cursor: pointer; } .mobile-nav #toggle:checked + .menu { display: flex; }

 <div class="mobile-nav"> <label for="toggle"><i class="fas fa-bars fa-2x"></i></label> <input type="checkbox" id="toggle"> <div class="menu"> <ul> <li><a href="#home">HOME</a></li> <li><a href="#promise">OUR PROMISE</a></li> <li><a href="#team">TEAM</a></li> <li><a href="#sponsors">SPONSORSHIPS</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div> </div>

Answer 1

You can put your main content in a div and adjust the top margin when the menu is expanded. 您可以将主要内容放入div中，并在展开菜单时调整上边距。

Live Demo 现场演示

HTML: HTML：

<body id="body">
    <div class="mobile-nav">
        <label for="toggle">button</label>
    <input type="checkbox" id="toggle" onclick='onClickHandler(this)'>
    <div class="menu">
      <ul>
        <li><a href="#home">HOME</a></li>
        <li><a href="#promise">OUR PROMISE</a></li>
        <li><a href="#team">TEAM</a></li>
        <li><a href="#sponsors">SPONSORSHIPS</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>

  <div id="content">
    Content
  </div>
</body>

<script>
function onClickHandler(e){
  var content = document.getElementById("body");

  if(e.checked){
     content.setAttribute( 'class', 'push-down' );

  }else{
     content.setAttribute( 'class', '' );
  }
}
</script>

CSS: CSS：

//.. your styles 

#content{
  height:300px;
  background-color:yellow;
  margin-top:50px;
}

#body.push-down{
  margin-top:250px;
}

Answer 2

You may use max-height: 0px; 您可以使用max-height：0px; and overflow: hidden; 和溢出：隐藏； instead of display: none; 而不是显示：无； for div.menu . 对于div.menu。 Animate max-height: on toggle. 动画最大高度：切换时。

js for toggle class 切换类的js

$('#toggle').on('click', function(){
    $('.mobile-nav .menu').toggleClass('active'); //Toggle Class on Click
});

CSS CSS

.menu {
    height: auto;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in;
}
.menu.active {
    max-height: 500px; //Set any value higher than menu
}

See a working demo here : https://jsfiddle.net/rbzfk0ca/36/ 在此处查看有效的演示： https : //jsfiddle.net/rbzfk0ca/36/

单击汉堡包图标时如何下推菜单内容？

问题描述

2 个解决方案

解决方案1
0 2019-03-06 12:25:02

解决方案2
0 2019-03-07 16:44:49

单击汉堡包图标时如何下推菜单内容？

问题描述

2 个解决方案

解决方案1 0 2019-03-06 12:25:02

解决方案2 0 2019-03-07 16:44:49

解决方案1
0 2019-03-06 12:25:02

解决方案2
0 2019-03-07 16:44:49