—»     —»   Построение CSS3-меню по принципу адаптивного дизайна
  Раздел: Меню и Навигация   Нет комментариев  

Построение CSS3-меню по принципу адаптивного дизайна



Данное пособие содержит пошаговые инструкции по конструированию гибкого меню навигации, способного адаптироваться к экранам разного размера, средствами CSS с помощью блоков параметров устройств вывода Media Queries.

Построение CSS3-меню по принципу адаптивного дизайна

Цифровые значения параметров: от мелких экранов к более крупным

Проектировать адаптивное меню я решил в русле концепции "Мобильный - первый". На практике этот подход означает первичность мобильных устройств с их стандартами и вторичность более крупных, например, настольных дисплеев. Базовый эскиз разрабатывается, исходя из параметров популярных мобильных устройств - 320 x 480. А далее я задействую блоки Media Queries - главным образом, для масштабирования эскиза под размеры более крупных экранов, а также в качестве действенного средства повышения потребительских свойств эскиза.

Адаптивное меню проектируется в расчёте на экраны следующих размеров:

- 320 x 480
- 480 x 320
- 768 x 1024
- 1024 x 768

Разметка

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

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

<header id="banner" role="banner">
<div id="banner-inner-wrapper">
<div id="banner-inner">
<hgroup id="title">
<img id="logo" src="image/logo.png" title="Responsive Bar" />
</hgroup>

<nav id="menu-nav">
<!-- button to show and hide the menu -->
<div id="menu-button">
<div id="menu-button-inner"></div>
</div>
</nav>

</div>
</div>

<!-- menu itself -->
<nav id="menu-drink">
<ul>
<li>
<a class="beer" href="#"><span class="icon"></span>Beer</a>
</li>
<li>
<a class="wine" href="#"><span class="icon"></span>Wines</a>
</li>
<li>
<a class="soft-drink" href="#"><span class="icon"></span>Soft Drinks</a>
</li>
<li>
<a class="coffee-tea" href="#"><span class="icon"></span>Coffee & Tea</a>
</li>
</ul>
</nav>
</header>

Добавление CSS-стилей

Теперь посмотрим, как "одеть" эту разметку в 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'ах вместо пикселов. Преимущество данной единицы измерения в её большей пригодности для масштабирования шрифта элемента. Её значение вычисляется делением количества пикселов на текущий размер шрифта (в нашем случае - 16px).

#banner-inner-wrapper {
display: table;
width: 96%;
margin: 0.375em auto; /* 6/16 = 0.375em; */
}
#banner-inner {
display: table-row;
}
#title {
display: table-cell;
}
#logo {
max-width: 100%;
vertical-align: middle;
}
#menu-nav {
display: table-cell;
vertical-align: bottom;
text-align: right;
}

Я придал открывающей меню кнопке множество CSS3-свойств. В частности, я обработал края (border-radius), оттенил её и придал ей объёмность (box-shadow и background-image: linear-gradient(...)). Кроме того, я обеспечил плавность перевода кнопки из одного состояния в другое (transition).

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

#menu-button {
vertical-align: bottom;
float: right;
padding: .375em; /* 6/16 = .375em */
margin: 0 .375em 0 2em; /* 6/16 = .375em, 32/16 = 2em */
opacity: .7;
cursor: pointer;

transition: all .2s linear;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

background-color: #4D8EBC;
background-image: linear-gradient(top,rgba(100, 152, 190, .5),rgba(30, 82, 120, .5));
background-position: left bottom;
background-repeat: repeat-x;
}

Я изменил вид кнопки в активированном состоянии (:active), чтобы выбранной она выглядела иначе. Я также назначил нижнему полю отрицательное значение, чтобы зрительно "утопить" её, сделать заметнее момент её выбора.

#menu-button.selected,
#menu-button:active {
opacity: 1;

box-shadow: 0 1px 1px rgba(120, 120, 120, .2);
background-color: #2E6288;
background-image: linear-gradient(top,rgba(25, 68, 99, .5),rgba(30, 82, 120, .5));

margin-bottom: -.375em; /* 6/16 = .375em */
}

И последний штрих - картинка, поясняющая назначение и способ действия кнопки.

#menu-button-inner {
background: transparent url(../image/menu-bg.png) no-repeat 0 0;
width: 78px;
height: 41px;
}

Вот, что у нас в итоге получилось, благодаря CSS:

Построение CSS3-меню по принципу адаптивного дизайна

Теперь рассмотрим CSS-вёрстку самого меню.

Я нашёл три следующие способа не дать меню при развёртке занять весь экран целиком:

* Способ 1: Расположить все пункты по вертикали, каждый в отдельной строке
* Способ 2: Расположить по два пункта в каждой строке
* Способ 3: Расположить все пункты по горизонтали в одной строке

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

Я зрительно слегка приподнял плашку основы меню #menu-drink над плоскостью размещения контента, оттенив её (box-shadow).

#menu-drink {
clear: both;
position: absolute;
width: 100%;
background-color: #2e6288;

box-shadow: 0 2px 2px rgba(25, 68, 99, .4);

display: none; /* Not shown initially */
}

Действуя выбранным мной Способом 2, устанавливаю ширину списка «li» в 50 %.

#menu-drink ul {
overflow: hidden; /* clears the float */
}
#menu-drink li {
float: left;
width: 50%; /* takes up 50% of the available width */
}

Дальнейшая CSS-вёрстка направлена, в основном, на адаптацию пунктов меню. В следующем фрагменте CSS-кода я обозначил ряд существенных моментов, которые недолго и упустить из вида:

#menu-drink a {
color: #c2daeb;
white-space: nowrap;
text-decoration: none;
display: block;

transition: color 0.3s linear, background-color 0.3s linear;
box-shadow: inset 0 0 2px #0A3E64;

padding: .375em; /* 6/16 = .375em */

/* These vertically center the contents of the element */
line-height: 2.875em; /* 46/16 = 3.375em */
height: 2.875em; /* 46/16 = 3.375em */
}
#menu-drink a:hover,
#menu-drink a:active {
color: #fff;
background-color: #23577D;
}
#menu-drink .icon {
background: transparent url(../image/drink-flat.png) no-repeat 0 0;

/* This makes the icon to sit next to the text */
display: inline-block;

vertical-align: bottom;
opacity: .6;
width: 2em; /* 32/16 = 2em */
height: 2.875em; /* 46/16 = 2.875em */
margin-right: .5em; /* 8/16 = 0.5em */

transition: opacity 0.3s linear;
}
#menu-drink a:hover .icon {
opacity: 1;
}
#menu-drink .wine .icon {
background-position: 0 0;
}
#menu-drink .beer .icon {
background-position: -2em 0; /* 32/16 = 2em */
}
#menu-drink .coffee-tea .icon {
background-position: -4em 0; /* 64/16 = 4em */
}
#menu-drink .soft-drink .icon {
background-position: -6em 0; /* 96/16 = 6em */
}

Приведённая выше CSS-вёрстка принимает вид следующего эскиза шириной 320px:

Построение CSS3-меню по принципу адаптивного дизайна

Исходный вариант эскиза готов.

Блоки Media Queries

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

@media screen and (min-width: 480px) {
/*
* Made all the items display horizontally as the screen is wide
* enough to accommodate it
*/
}
@media screen and (min-width: 560px) {
/*
* Made small adjustments to the margin and padding around
* the menu items
*/
}
@media screen and (min-width: 768px) {
/*
* Made the items display next to the logo. At this width the screen is
* large enough so that there is no need to hide the menu
*/
}
@media screen and (min-width: 1024px) {
/*
* At this width, everything appears little cramped so I made the
* padding around the whole thing larger to give the illusion of space.
* I also used larger and cooler icons.
*/
}

Вам, очевидно, бросился в глаза фрагмент min-width: ...px. Это своего рода условие: "Данные значения параметров вступают в силу при минимальной ширине ...px".

jQuery/javascript

Фу-у, наконец-то, с CSS разобрались! Теперь обратимся к jQuery-вёрстке меню. Средствами jQuery я скрываю/отображаю меню в зависимости от состояния кнопки, а также при изменении размера окна.

jQuery(function($) {
// This will hold the state of the pop-up menu
var open = false;

function resizeMenu() {
// If window is less than 480px wide
if ($(this).width() < 480) {
if (!open) {
// Hide the menu if it's not supposed to be displayed
$("#menu-drink").hide();
}
// Display the button
$("#menu-button").show();
}
else if ($(this).width() >= 480) {
// If window is wider than 480px
if (!open) {
// Show the menu if it's not displayed yet
$("#menu-drink").show();
}
// Hide the button if the screen is wide enough for the menu to always show
$("#menu-button").hide();
}
}

function setupMenuButton() {
$("#menu-button").click(function(e) {
e.preventDefault();

// If already shown...
if (open) {
// Hide the menu
$("#menu-drink").fadeOut();
$("#menu-button").toggleClass("selected");
}
else {
// If not shown, show the menu
$("#menu-drink").fadeIn();
$("#menu-button").toggleClass("selected");
}
open = !open;
});
}

// Add a handler function for the resize event of window
$(window).resize(resizeMenu);

// Initialize the menu and the button
resizeMenu();
setupMenuButton();
});

Ура! Мы получили гибкое адаптивное меню навигации, аккуратно свёрстанное нами средствами CSS3-технологии. Посмотрите демо-версию, выложенную ниже, можете также скачать её на будущее в качестве образца.

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Примечания

Демо-версия адаптивного меню запускается в браузерах Chrome, Firefox, Safari, IE8 и выше.

Я использовал Respond.js и скрипт поддержки HTML5 в браузере IE, так что, HTML5 с блоками Media Queries должны распознаваться Firefox 2 и IE.

Кроме того, я применил таблицу стилей Reset Stylesheet от html5doctor.com для отображения демо-версии.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, адаптивный дизайн, Media Query
Опубликовал Design FactoRy   Прочитано (раз): 7629   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930