Меню как в Facebook’е (адаптивное)

Меню как в Facebook’е (адаптивное)

От автора: несомненно, адаптивная технология становится все более популярной. Она позволяет нам сэкономить время при разработке дизайна, предназначенного для применения на множестве устройств: от мобильных до широкоэкранных компьютеров. Не нужно разрабатывать отдельные версии сайта для каждого формата (устройства). Сегодня мы создадим новое адаптивное меню, которое выглядит, как в facebook’е. Для его создания не понадобится javascript, все выполняется с помощью одного CSS3 (для IE7-IE10, Firefox, Opera, Safari, Chrome и iPad/iPod/iPhone).

К сегодняшнему уроку мы приготовили две демонстрации (разные адаптивные результаты). Первое меню превращается в select, второе – в вертикальное меню (для открытия подменю можно пользоваться сенсорным экраном):

скачать исходникидемодемо

Шаг 1. HTML

Основа меню обычная, на базе UL-LI:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

index.html

На этом этапе все должно быть понятно. Для создания первой версии (с применением select) нам нужно добавить этот элемент (под меню):

По умолчанию этот селектор скрыт. Он виден только на маленьких устройствах (из-за своих адаптивных правил)

Шаг 2. CSS

В этом разделе мы начинаем украшать навигационное меню. Сначала нужно назначить общие стили:

css/main.css

Теперь можно подготовить стили элементов первого уровня:

У меню имеется голубая градиентная полоса, все элементы выровнены согласно float:left (горизонтально рядом друг с другом). Следующий элемент – это разделитель элементов меню:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

И еще нужно добавить стили подменю (выпадающего):

Вот так. Меню завершено, и мы готовы начать добавление адаптивных стилей (с помощью медиазапросов). Медиазапросы CSS3 применяются для определения того, каким образом стили будут меняться в определенных контрольных точках (и особенно размеры экрана устройства ). Как вы помните, для первого демо-примера мы подготовили select, давайте теперь модифицируем его стили:

Первое меню, наконец, готово и получило свои адаптивные стили.

Версия 2 – Вертикальное меню

Для создания возможности управления меню с сенсорной панели можно воспользоваться простым приемом – применить псевдоэлемент :target. Сначала нужно модифицировать разметку HTML (добавить несколько скрытых элементов span):

index2.html

Логика действия щелчка описана в следующих стилях:

Это означает, что при достаточно малом экране меню конвертируется в вертикальное, с возможностью открывать подменю, щелкая на его родительские элементы. Второе меню тоже, наконец, готово.

Заключение

Только что мы создали два различных (по логике) адаптивных меню, которые смотрятся как меню в facebook’е (те же синие цвета и стили). Я уверен, что вам оно очень пригодится. Удачи и добро пожаловать к нам обратно!

Автор: Andrew

Источник: http://www.script-tutorials.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Pocherk

    На мой взгляд, 2-ой вариант поинтересней и полезней

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree