Чаще всего при разработке раскрывающегося мобильного меню применяют пару строк js-кода, который реагирует на клик (равно касание) по кнопке, отвечающей за раскрытие меню. После касания, как правило, скрипт заменяет или добавляет класс к элементам меню, применяя тем самым нужные стили.
В примере ниже, я покажу, как создавать подобные меню без использования js. На чистом html+css.
Итак. Начнем с html-кода меню. Оно должно быть таким
|
1 2 3 4 5 6 7 8 9 10 |
<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 у нас будет такого типа:
|
1 2 3 4 |
#toggle-menu {display: none;} /* скрываем сам чекбокс */ .nav {visibility: hidden; display: none;} /* предварительно меню свернуто */ /* показываем меню, если нажали на кнопку, отметили чекбокс */ #toggle-menu:checked + .nav {display: block; visibility: visible;} |
Я умышленно привел так мало кода, чтобы ничего не отвлекало. Все остальные плюшки созданные посредством css — служат лишь оформлением.
