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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<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>

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

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

.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.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');
  });
});

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

Вам нужно перейти в само демо, чтобы поиграться с растягиванием по вертикали.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree