Простое тянущееся меню на Flexbox

Дата публикации: 2017-03-07

От автора: мне понравилось выезжающее меню на сайте The New Tropic. Но меня заинтересовала не сама выезжающая часть, а то, как элементы внутри меню занимают пространство. Они растягивались, занимая все пространство, и никогда не сжимались слишком сильно. Такое довольно легко реализовать на flexbox! Давайте немного разберемся.

На видео ниже показано, что я имею в виду:

Мне очень понравилось вложенное меню. Когда меню второго уровня открыто, применяются те же самые правила. Если окно растянулось, элементы меню сжимаются, оставляя место под меню второго уровня. Элементы меню не сжимаются слишком сильно. Если места нет, меню просто будет прокручиваться.

HTML код стандартного двухуровневого меню

Легко написать на Emmet:

<nav class="main-nav">
  <ul class="nav-list">
    <li><a href="">Lorem ipsum.</a></li>
    <li>
      <button class="submenu-toggle-button">+</button>
      <a href="">Explicabo, perspiciatis.</a>
      <ul class="submenu nav-list">
        <li><a href="">Lorem ipsum.</a></li>
        <li><a href="">Culpa, qui!</a></li>
        <li><a href="">Repudiandae, eaque.</a></li>
      </ul>
    </li>
    <li><a href="">Sit, dolor.</a></li>
    <li><a href="">Dicta, possimus?</a></li>
    
    <!-- etc -->

  </ul>
</nav>

<li><a href="">Lorem ipsum.</a></li>

<li>

<a href="">Explicabo, perspiciatis.</a>

<li><a href="">Lorem ipsum.</a></li>

<li><a href="">Culpa, qui!</a></li>

<li><a href="">Repudiandae, eaque.</a></li>

</ul>

</li>

<li><a href="">Sit, dolor.</a></li>

<li><a href="">Dicta, possimus?</a></li>

</ul>

</nav>

Добавляем в колонку flexbox

Давайте проверим, что высота списка совпадает с высотой окна браузера. Это легко сделать с помощью вьюпорт единиц изменения. Далее необходимо убедиться, что элементы списка растягиваются и заполняют пространство:

.main-nav > ul {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-nav > ul > li {
  flex: 1;
}

.main-nav > ul {

height: 100vh;

display: flex;

flex-direction: column;

}

.main-nav > ul > li {

flex: 1;

}

Почти все сделали! Растягивание работает только, когда есть место, как мы и хотели:

Быстрые переключатели

Для открытия подменю у нас есть тег button (возможно, нужно вставлять эти кнопки через JS, так как без него они ничего не делают). Вот так они могли бы работать. Подменю по умолчанию скрыты:

.submenu {
  max-height: 0;
  transition: 0.5s;
  overflow: hidden;
}

.submenu {

max-height: 0;

transition: 0.5s;

overflow: hidden;

}

Открыть подменю можно с помощью класса:

.submenu.open {
  max-height: 200px; /* неидеальное магическое число */
}

.submenu.open {

max-height: 200px; /* неидеальное магическое число */

}

Высота анимируется до неизвестного числа, что довольно запутанно. Надеемся, вскоре мы напишем статью, объясняющую этот момент (есть разные варианты).

Переключение классов сделать очень просто:

var buttons = document.querySelectorAll('.submenu-toggle-button');

[].forEach.call(buttons, function(button) {
  button.addEventListener('click', function() {
    var submenu = button.parentNode.querySelector('.submenu');
    submenu.classList.toggle('open');
  });
});