Простое адаптивное меню с кнопкой "Закрыть" на 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