После того как мы разобрали пример простого горизонтального адаптивного меню, мы переходим к примеру горизонтального адаптивного меню с чекбоксом, который не требует яваскриптов и сделан на чистом css.
Перед тем как мы познаем разметку и стили в меню мы познакомимся с его эскизами.
Для данного меню у нас имеется пара эскизов с высоким и низким разрешением.
Эскиз адаптивного меню на высоком разрешении
Как мы видим в меню присутствует иконка, с помощью которой меню и вызывается.
Далее посмотрим эскиз меню на низком разрешении
И уже теперь перейдём непосредственно к разметке и css коду.
Разметка меню осуществляется с помощью div слоя
Код
<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS Библеотека</a></li>
<li><a href="#">CSS Галерея</a></li>
<li><a href="#">JavaScript</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>
А стили css прописаны при помощи атрибута media screen, однако на юкозе
лимит знаков присутствует на форуме и вам придётся смотреть стили на страничке с примером