Просте тягнулось меню на Flexbox

30

Від автора: мені сподобалося виїжджає меню на сайті The New Tropic. Але мене зацікавила не сама виїжджає частину, а то, як елементи всередині меню займають простір. Вони розтягувалися, займаючи весь простір, і ніколи не стискалися занадто сильно. Таке досить легко реалізувати на flexbox! Давайте трохи розберемося.

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

Мені дуже сподобалося вкладене меню. Коли меню другого рівня відкрито, застосовуються ті ж самі правила. Якщо вікно розтягнулося, елементи меню стискуються, залишаючи місце під меню другого рівня. Елементи меню не стискаються занадто сильно. Якщо місця немає, меню просто буде крутитися.

HTML-код стандартного дворівневого меню

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

  • Lorem ipsum.
  • +
    Explicabo, perspiciatis.

    • Lorem ipsum.
    • Culpa, qui!
    • Repudiandae, eaque.
  • Sit, dolor.
  • Dicta, possimus?

Додаємо в колонку 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.5 s;
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’);
});
});

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

Вам потрібно перейти в саме демо, щоб погратися з розтягуванням по вертикалі.