單擊漢堡包圖標時如何下推菜單內容？

Question

我希望我的漢堡圖標下推內容，即單擊漢堡圖標時的背景和文字。 我試圖在身體上添加填充物並將漢堡包的寬度設置為正確，但似乎不起作用。 我已經嘗試了最近幾個小時。 如果可能，我只想使用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

您可以將主要內容放入div中，並在展開菜單時調整上邊距。

現場演示

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：

//.. your styles 

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

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

Answer 2

您可以使用max-height：0px; 和溢出：隱藏； 而不是顯示：無； 對於div.menu。 動畫最大高度：切換時。

切換類的js

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

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
}

在此處查看有效的演示： 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