горизонтальное адаптивное меню с чекбоксом - Форум о сайтостроении


Страница 1 из 11
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » горизонтальное адаптивное меню с чекбоксом
горизонтальное адаптивное меню с чекбоксом
Alexiya Дата: Пятница, 13.03.2015, 18:03 | Сообщение # 1
Группа: Администраторы
Сообщений: 179
Репутация: 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>
А  стили css прописаны при помощи атрибута media screen, однако на юкозе
лимит знаков присутствует  на форуме и вам придётся смотреть стили на страничке с примером happy


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » горизонтальное адаптивное меню с чекбоксом
Страница 1 из 11
Поиск:



Copyright Аниме Клон © 2017

Привет!
Меню пользователя
Воскресенье, 22.10.2017, 07:20

Приветствую Вас Гость

Главная | Регистрация | Вход | RSS