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中，并在展开菜单时调整上边距。

Live Demo

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; 和 overflow：hidden; 代替div.menu的 display：none; 。设置最大高度动画：在切换时显示。

切换类的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 个答案: