Як адаптувати навігацію на сайті для телефонів

Вітаю. Гадаю кожен хто верстав адаптивні макети знає як буває складно адаптувати під маленькі екрани горизонтальне меню. Приходиться або використовувати готові скрипти або писати самому, чим сьогодні й займемося.

Як приклад візьмемо стандарту довгу навігацію в шапці сайту та зробимо так, щоб при зменшенні ширини екрану, з'являлася кнопочка при кліку на яке теж саме меню виїжджало, тільки вже у вигляді вертикального списку. Я хочу показати основний принцип, пояснити як написати найпростіший робочий варіант, щоб вам було під силу вирішити у майбутньому подібну задачу.

Ось посилання на демо. Спробуйте зменшити ширину вікна браузера або звузити блок з результатом біля редактора:

Демо

Розмітка HTML

<header>
  <nav class="nav">
    <a href="#">Головна</a>
    <a href="#">Про нас</a>
    <a href="#">Контакти</a>
    <a href="#">Проекти</a>
    <a href="#">Користувачі</a>
    <a href="#">Посилання</a>
  </nav>
</header>

Наша базова розмітка. Просто навігація десь у шапці з вигаданими пунктами.

* {
 /* зкидуємо стилі */ 
  padding: 0;
  margin: 0;
}

header {
  background-color: #ddd;
}

.nav a {
  text-decoration: none;
  color: #444;
  padding: 12px 8px;
  display: inline-block;
}

.nav a:hover {
  color: #fff;
  background-color: #222;
}

Небагато стилізації не завадить: відступи, кольори, ефекти при наведенні. Чисто для прикладу.

Проблема

Якщо на екрані комп'ютера навігація виглядає як ми й задумували(у стилі вбитих двотисячних), то на мобілці вже є проблема: посилання перескакують на новий рядок та виходить каша. Один із варіантів(який власне ми й реалізуємо) це при малій ширині екрану розташовувати пункти меню вертикально. Але якщо їх багато - виходить величезна простиня, і користувачу, щоб добратися до контенту треба буде ще й менюшку прокручувати. Як варіант, та і ви я гадаю вже зрозуміли з першої частини статті - ця власне простиня буде показуватися тільки при кліку на кнопочку.

Як це все працюватиме: якщо ширина екрану менша за 768px(наприклад), то за допомогою @media-запиту перетворюємо наше горизонтальне меню у вертикальне та показуємо кнопку, а за допомогою JS робимо так, щоб при кліку це меню показувалося.

Щоб кнопку показати її спочатку треба додати у HTML:

<header>
  <button id="btn">Меню</button>
  <nav class="nav">
    /* тут наша навігація */
  </nav>
</header>

Відразу стилізуємо. Як я вже сказав - ця стаття просто приклад, демонстрація принципу, тому над красотою ми не паримося.

#btn {
  margin: 10px;
  display: none;
}

Не забуваємо прибрати з екрана за допомогою display: none;, показувати будемо тільки коли ширина екрану менша за 768px як і домовлялися раніше.

Мобільне меню

А зараз займемося варіантом навігації для телефонів.

@media screen and (max-width: 768px) {

  .nav {
    height: 0;
    overflow: hidden;
    border-top: 1px solid #ccc;
  }

  .nav a {
    display: block;
    text-align: center;
  }

  #btn {
    display: inline-block;
  }

}

Робимо блоковими посилання та центруємо вміст. По дефолту висота буде дорівнювати 0. Якщо навігація має клас .show - висота вже дорівнюватиме auto, тобто стільки скільки займає вміст. Щоб при нульовій висоті не показувався вміст навігації, прописуємо overflow: hidden;.

JavaScript

І власне сам скрипт, який виконує всю роботу.

При кліку на кнопку, нам треба показати, або приховати, якщо воно вже показане, меню. Простіше кажучи додати/прибрати клас .show.

Якщо зареєстрований клік на .btn - викликаємо функцію:

document.getElementById('btn').onclick = function() {
 var nav = document.querySelector('.nav');

 nav.classList.contains('show') ? nav.classList.remove('show') : nav.classList.add('show');
 /*
  if ( nav.classList.contains('show') ) nav.classList.remove('show');
  else nav.classList.add('show');
 */
}
Демо

Звичайно, що це найпростіший можливий приклад. Тут найголовніше зрозуміти принцип, а далі за бажанням можна вже приліплювати різні ефекти на саме меню або кнопочку, про що ще будуть статті у майбутньому.

Дякую за увагу. Пишіть у коментах, якщо маєте питання або ідеї для майбутніх постів.