Простое адаптивное меню с кнопкой "Закрыть" на CSS

Основное правило современного веб-дизайна заключается в том, что сайт и его контент должны правильно отображаться на различных устройствах, в том числе и мобильных. Одним из главных аспектов в интерфейсе сайта является качественная навигация. В данной статье показан пример как сделать простое адаптивное меню с кнопкой закрыть, используя только CSS, реализуя функционал без применения javaScript. Все что нам понадобится - изображение иконки "бургег" для открытия меню и крестика, для его закрытия соответственно, которые я приготовил заранее.

  Отзывчивость меню работает следующим образом: на большом мониторе меню имеет классический вид - все блоки выстроены в одну горизонтальную линию; на планшете - блоки меню разделены на две равнораспределенные по экрану колонки; а на экранах мобильных устройств показана небольшая кнопка с иконкой-"бутерброд", при клике по которой открываются разделы меню, а иконка меню меняется на кнопку закрытия в виде крестика. Клик по крестику закрывает меню и возвращает его в первоначальное положение.
Скриншот адаптивного меню на мобильном устройстве
  Проверить меню на адаптивность и проделать все манипуляции самостоятельно можно на странице примера, изменяя размеры окна браузера или зайдя с мобильного устройства.

ПРИМЕР
  Для всего этого чуда понадобился вот такой спрайт с иконками "бургера" и крестика:

  Код меню самый обычный, какой большинство использует для создания навигации по сайту:
<div class='ad-menu'>
<nav class='nav' tabindex='1'>
<ul>
<li><a href='#'>Главная</a></li>
<li><a href='#'>О компании</a></li>
<li><a href='#'>Блог</a></li>
<li><a href='#'>Галерея</a></li>
</ul>
</nav>
</div>

  Основной CSS включает в себя и сброс стилей для блоков, псевдоклассов и псевдоэлементов, используемых в коде, при ненадобности его можно удалить.
.ad-menu *:focus,.ad-menu *::before,.ad-menu *::after {
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: content-box; /*это свойство обязательно*/
}
.ad-menu li {
  display: inline-block;
  background: #c2f272;
  font-size: 1.4em;
  text-align: center;
  width: 24%;
}
.ad-menu li:hover {
  background: #f2d272;
}
.ad-menu li a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 10px 0;
  width: 100%;
}
  Теперь осталось задать правила адаптивности, а именно свойства отображения меню для различных размеров экрана и прописать функционал открытия и закрытия меню.
/*поведение меню при разрешении менее 920 пикселей*/
@media screen and (max-width: 920px) {
.ad-menu li {
    width: 49.5%;
  }
}
/*поведения и структура при экране менее 680 пикселей*/
@media screen and (max-width: 680px) {
.ad-menu li {
    width: 100%;
}
.ad-menu ul {
  display: none;
}
.ad-menu nav::before,
.ad-menu::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo/6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl+CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg==);
  cursor: pointer;
  height: 24px;
  width: 24px;
}
.ad-menu nav::before,
.ad-menu::after {
  background-color: #fc0;
  border: 9px solid #fc0;
}
.ad-menu::after {
  background-position: -24px -24px;
  z-index: 1;
}
.ad-menu nav::before {
  z-index: 2;
}
.ad-menu nav:focus::before {
  z-index: 0;
}
.ad-menu nav:focus ul,
.ad-menu ul:hover { /*решаем проблему со скликиванием*/
  display: block;
}
}
  Работа меню реализована с помощью псевдокласса :focus, для этого к тегу контейнера <nav> добавлен атрибут tabindex чтобы блок смог получить фокус и меню стало видимым. Кнопки открытия и закрытия можно сместить изменив соответствующие свойства в коде CSS для элементов кнопок.
  С помощью псевдокласса :hover решена проблема со скликаванием. Пока курсор находится на меню, оно остается видимым и кликабельным.
  При желании менюшку можно симпатично оформить и добавить немного анимации, все также используя только свойства CSS, исключив JS-скрипты.

©http://magentawave.com

14 комментариев:

  1. Всегда пожалуйста, приходите еще )

    ОтветитьУдалить
  2. Это странно, даже не знаю, я проверял с андроид 4.4.2, на большинстве браузеров - меню отлично работает.

    ОтветитьУдалить
  3. Если уж прикручивать jQuery скрипт, то лучше использовать функцию fadeToggle() :)

    ОтветитьУдалить
  4. Анонимный03.07.2017, 23:29

    meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"

    ОтветитьУдалить
  5. Анонимный09.07.2017, 17:30

    У меня тоже на телефоне со 2-м андройдом не кликается

    ОтветитьУдалить
  6. Не работает в Mozilе!!! Даже со скриптом и добавление Meta.
    Как же быть?!

    ОтветитьУдалить
  7. Анонимный21.09.2017, 17:05

    Сделал чтобы кнопка "меню" на маленьком расширении была всегда на виду. Чтобы не возвращаться вверх, если нужно открыть меню.
    Но есть один момент, если страницу промотать вниз и в этот момент нажать на меню, оно открывается, но в самому верху страницы и его не видно, заметно только что полоса прокрутки увеличилась, но и если промотать страницу вверх, тогда меню видно.
    Подскажите, как сделать, чтобы меню сразу появлялось при нажатии кнопки, не зависимо где страница открыта в начале, середине или в конце страницы?
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Нужно установить свойство для всего блока, а не только для кнопки.
      ad-menu {
      position: fixed;
      left: 100%;
      top: 10%;
      }

      Для того чтобы свойство CSS работало только на мобильных устройствах, там где нужна именно кнопка меню, воспользуйтесь правилом @media
      http://www.magentawave.com/2016/09/make-responsive-website.html

      Удалить
  8. Анонимный06.01.2018, 20:27

    Подскажите, что нужно сделать, что бы в Mozilla Firefox работало?

    ОтветитьУдалить
  9. Я прикрепил кнопку гамбургер к выпадающему меню, которое закрывается от клика по экрану в любом месте, но когда так закрываешь меню, кнопка не сворачивается обратно из крестика в полоски, только если кликнешь по кнопке, тогда сработает анимация. Какой код можно вставить в java скрипт чтобы исправить это? Сейчас стоит вот такой код
    $(document).ready(function () {
    $(".hs-menubar").hsMenu();
    $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
    });
    });

    ОтветитьУдалить
    Ответы
    1. Во-первых: у вас на одной из переменных висит какая-то функция - hsMenu(); что она делает не понятно. Во-вторых: в скрипт ничего добавлять не нужно, все сделайте через CSS, когда меняете класс у элемента .hamburger

      Удалить
  10. а сделать выпадающее меню хотя бы с первым уровнем вложенности из этого возможно?

    ОтветитьУдалить
  11. а доюавить хотя бы один уровень выпадающего меню тут возможно?

    ОтветитьУдалить

Следующее Предыдущее

BestProject