НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Как создать CSS3 респонсивное меню

2

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

Параметры дизайна: от маленького до большого экрана

Дизайн меню мы начнем с его адаптации под мобильные устройства. В сущности, такой подход подразумевает стратегию дизайна сперва для мобильных устройств, а затем для больших экранов настольных мониторов. Базовый дизайн разработан для популярных размеров мобильных устройств – 320 х 480. Мы будем использовать медиа запросы для масштабирования под большие размеры экранов.

Размеры экранов, для которых предназначается меню:

  • 320 x 480
  • 480 x 320
  • 768 x 1024
  • 1024 x 768

Демо Скачать Урок

 

Разметка

Внутри header мы добавили два nav тега,  один для кнопки, которая открывает меню, в то время как другой тэг содержит пункты меню. Каждый пункт меню содержит a  span для презентации значка-иконки.

С целью сокрытия кнопки #menu-button, когда экран достаточно широк, чтобы меню было постоянно видимым рядом с логотипом, мы поместили  #menu-drink после #banner-inner-wrapper внутри header. Это позволит нам расположить меню рядом или под логотипом.

CSS стили

Мы оспользуем таблицу CSS, чтобы установить расположение контента хэдера –   display:table для  #banner-inner-wrapper, display:table-row для  #banner-inner и  display:table-cell для  #title и  menu-nav.

Зачем использовать таблицы CSS? Потому что они надежней против изменений макета и требует меньше работы, чем поплавки и   display:inline-block, если вы хотите сохранить колонки бок о бок.

Мы также указали логотипу уменьшаться до доступного пространства своего контейнера, применив max-width:100%. Это предотвращает изображение от пребывания больше, чем ширина данная его контейнеру.

Одна из стратегий, которую следует отметить, это использование em вместо px. Полезным свойством данного устройства является то, что он приятно масштабируется до текущего размера шрифта элемента. Чтобы решить эту задачу, разделите число пикселей на текущий размер шрифта (в данном случае 16px).

Мы стилизовали кнопку, которая открывает меню, большим количеством CSS3 кода. В частности, мы использовали  border-radiusbox-shadow и  background-image: linear-gradient(...). Мы также использовали transition свойство, чтобы сгладить переход между различными состояниями кнопки.

Отметим, что в CSS, мы исключили браузер/поставщик специфические свойства, такие как   -moz-transition  и  -webkit-box-shadow, для простоты. В самом файле CSS эти свойства включены.

Мы изменили стиль кнопки :active, чтобы позволить ей менять внешний вид, когда она была выбрана. Кроме того, мы добавили к ней отрицательное нижний маржин , чтобы она опустилась, делая втд, что её  выбрали/кликнули.

Последние штрихи…

А вот и результат нашего CSS

css3-adaptive-menu2

Чтобы убедиться, что меню не занимает весь экран, когда оно появляется, мы рассмотрели три следующих варианта:

  1. Вариант 1: отображать все элементы вертикально, каждый в отдельной строке
  2. Вариант 2: отображать по два элемента в каждой строке
  3. Вариант 3: Отображать все элементы по горизонтали, все в один ряд

Вариант 1 был бы лучшим выбором, если единственное ограничение состояло бы в ширине экрана, потому что не нужно было бы беспокоиться о сжатии элементов. К сожалению, высота у нас весьма ограничена, поэтому мы выбираем вариант 2.

Для контейнера меню   #menu-drink, мы использовали box-shadow, чтобы казалось, что он плавает над содержанием.

Для реализации варианта 2, мы установили ширину li до 50%.

Остальным CSS для меню будет только для настройки пунктов меню. В CSS ниже, мы выделили некоторые важные свойства, которые легко пропустить:

Медиа запросы

Ниже приведены медиа запросы, которые мы использовали. Чтобы сделать все коротко и просто, мы исключили фактический CSS для стилизации меню для различных размеров экрана. Вместо этого, мы вставили комментарии, что было сделано:

 jQuery и JavaScript

Переходим к jQuery коду для меню. Мы использовали jQuery, чтобы показать или скрыть меню, когда выбрана кнопка, а также при изменении размеров окна.

css3-adaptive-menu

Теперь у нас есть респонсивное меню навигации, аккуратно оформленное в CSS3. Ознакомьтесь с демо, а также скачайте себе этот пример, для использования в будущем.

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.

  • Tofik Abdullayev

    то что искал,спасибо!

  • YuliiaMikuta

    Пожалуйста! )