Как сдвинуть содержимое меню вниз при нажатии на значок гамбургера? - PullRequest
Новая
       1

Как сдвинуть содержимое меню вниз при нажатии на значок гамбургера?

0 голосов
/ 06 марта 2019

Я хочу, чтобы мой значок гамбургера давил содержимое, означая фон и надпись, когда на значок гамбургера нажимали.Я попытался добавить отступы к телу и установить ширину гамбургера, но, похоже, не работает.Я пытался последние пару часов.Я только хочу использовать 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>

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Вы можете использовать max-height: 0px; и overflow: скрыто; вместо display: none; для 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/

0 голосов
/ 06 марта 2019

Вы можете поместить свой основной контент в 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...