Чаще всего при разработке раскрывающегося мобильного меню применяют пару строк js-кода, который реагирует на клик (равно касание) по кнопке, отвечающей за раскрытие меню. После касания, как правило, скрипт заменяет или добавляет класс к элементам меню, применяя тем самым нужные стили.
В примере ниже, я покажу, как создавать подобные меню без использования js. На чистом html+css.
Итак. Начнем с html-кода меню. Оно должно быть таким
<label class="open-toggle-menu" for="toggle-menu">
<i class="genericon genericon-menu">Раскрыть меню</i>
</label>
<input id="toggle-menu" type="checkbox" />
<nav class="nav">
<ul class="topmenu">
<li><a href="/">Первый пункт меню</a></li>
<li><a href="/">Второй пункт меню</a></li>
</ul>
</nav>Как вы наверное догадались — вся магия будет на чекбосах. Т.е мы связали поля input и label между собой. Далее логика будет такой. Если чекбос отмечен — показываем меню. Если галочка не стоит — скрываем меню.
Разумеется, что сам чекбокс нам не нужно показывать юзеру, поэтому мы скроем его через display:none; Иными словами css у нас будет такого типа:
#toggle-menu {display: none;} /* скрываем сам чекбокс */
.nav {visibility: hidden; display: none;} /* предварительно меню свернуто */
/* показываем меню, если нажали на кнопку, отметили чекбокс */
#toggle-menu:checked + .nav {display: block; visibility: visible;}Я умышленно привел так мало кода, чтобы ничего не отвлекало. Все остальные плюшки созданные посредством css — служат лишь оформлением.
