Создаем адаптивное меню

В добавку к прошлой записи, еще один небольшой пример с простой адаптивной менюшкой. Будем использовать CSS Media Query + jQuery. Демо с кодом, как всегда на Codepen, в продолжений поста более подробное, пошаговое описание.

Создадим обычный Unordered List и для начала разместим в нем два div-контейнера. Первый для значка меню (три горизонтальные полоски, возьмем для этого символ Unicode – ☰). Иконка будет видна только на маленьких экранах.

Во второй контейнер поместим все элементы/ссылки меню. У меня получился такой HTML-код:

<ul id="menu">
  <div class="icon">&#9776;</div>
  <div class="items">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Категорий</a></li>
    <li><a href="#">О сайте</a></li>
    <li><a href="#">Контакт</a></li>
  </div>
</ul>

Теперь займемся CSS. Для больших экранов скроем иконку меню (display:none в классе icon) и оставим только список с ссылками. В Media Query для класса icon, соответственно, пропишем display:block, для отображения иконки на маленьком экране.

* {
  padding:0;
  margin:0;
  font: 14px Helvetica, Arial;
}

#menu {
  background: #c0392b;
  width: 100%;
  padding: 20px 0;
  text-align: center;
}

#menu a {
  color: #fff;
  text-decoration: none;
}

#menu a:hover {
  color: #ccc;
}

#menu ul {
  padding:0;
  margin:0;
}

.items li {
  list-style: none;
  display:inline;
  padding-right: 15px;
  width:100%;
  margin: 0 auto;
}

.icon {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size:24px;
}

.showitems {
  display:block !important;
}

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

  .icon {
    display:block;
  }

  .items {
    display:none;
  }

  .items li {
    display:table;
    padding:10px 0;
  }

}

JS-часть будет отвечать за раскрытие списка меню при клике на иконку в уменьшенной/мобильной версий сайта. Для отображения/скрытия списка меню, мы будем использовать две функций addClass() и removeClass(), которые будут добавлять/удалять класс showitems в зависимости от значения селектора-псевдокласса is(‘:visible’).

Код:

$(function() {

  $(".icon").click(function() {

    if($(".items").is(":visible")) {
       $(".items").removeClass("showitems");
    }

    else {
        $(".items").addClass("showitems");
    }

  });
});

Раскрытое меню

Демо с кодом

Создаем адаптивное меню

О сайте

ArtsLab