|
Alexiya |
Дата: Пятница, 13.03.2015, 18:03 | Сообщение # 1
|
Группа: Администраторы
Сообщений: 180
Репутация: 11
Статус: Offline
| После того как мы разобрали пример простого горизонтального адаптивного меню, мы переходим к примеру горизонтального адаптивного меню с чекбоксом, который не требует яваскриптов и сделан на чистом 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>
лимит знаков присутствует на форуме и вам придётся смотреть стили на страничке с примером 
аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
|
|
|
| |
