Адаптивное меню javascript. Адаптивное горизонтальное меню. Pure CSS Flexbox Nav от Джо Уоткинса

Как обычно HTML структура смотрится очень просто - чистый код и ничего лишнего, приятно посмотреть. Однако, если посмотреть на результат в браузере, то возникает желание побыстрее открыть файл стилей и начинать наводить красоту.

Этим мы с вами сейчас и займемся.

Стилизация секции - section

В нашем случае секция занимает первый экран компьютера и тег section заполнен большой фоновой фотографией, на фоне которой будут располагаться все остальные элементы.

Section {
background: url(bg.jpg);
}

Нам надо обеспечить, чтобы фон не нарушая пропорций фотографии, заполнял все свободное пространство на любых устройствах.

Background-size: cover;
height: 100vh;

При просмотре на больших мониторах, при недостаточных размерах фотографии, она начнет размножаться. Запретим повтор фона.

Background-repeat: no-repeat;

На мобильных телефонах, без выравнивания фона по центру, он может срезаться.

Background-position: center center;

Секция подготовлена, в ней мы пропишем стили для шапки.

Стилизация шапки сайта - header

Немного забежим вперёд и посмотрим из каких блоков будет состоять шапка - это блок div с логотипом и блок навигации nav .

Как поставить два блока в ряд, ведь в естественном виде блоки стоят друг под другом? Flexbox метод отлично справляется с этой задачей - ставит в ряд и выравнивает относительно контейнера header так, как нам надо.

Header {
display: flex;
justify-content: space-between;
align-items: center;
}

Свойство box-shadow рисует нижнюю тень под шапкой, таким образом мы визуально отделяем шапку сайта от контента. Высоту шапки height предпочтительно задавать не в пикселях, а в относительных единицах, например в процентах, тогда на любых экранах будут сохранятся пропорции элементов сайта.

Height: 18%;
box-shadow: 0 5px 15px rgba(0,0,0,.2);

Результат работы flexbox-а и появившуюся тень, мы видим ниже.

Работа с логотипом

Сейчас логотип прижат к левому краю окна браузера, сдвинем его немного вправо.

Logo img {
margin-left: 2.3em;
}

Следующий код делает логотип адаптивным.

Max-width: 100%;

Стилизация меню - ul

Убираем маркеры у пунктов меню.

Ul {
list-style-type: none;
}

Превращаем вертикальное меню в горизонтальное, выравнивая все по центру, применяя flexbox метод. Свойство transition обеспечивает плавную работу hover эффекта, об этом позже.

Ul {
display: flex;
flex-flow: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
transition: .5s;
}

Пункты меню li стоят очень плотно друг к другу и надо поработать со шрифтом и ссылками.

Зададим поля вокруг пунктов меню.

Ul li a {
padding: 10px 20px;
}

Текст сделаем заглавными буквами и уберем подчеркивание ссылок.

Text-transform: uppercase;
text-decoration: none;

Выбираем шрифт потемнее для контраста и делаем его жирным (меня бесит, когда цвет текста сливается с фоновым цветом сайта).

Color: #262625;
font-weight: bold;

Создаем простой эффект при наведении и не забываем про плавный переход.

Ul li a:hover {
background: #000;
color: #fff;
transition: .5s
}

На следующем уроке мы сделаем наше меню адаптивным , делая медиа-запросы. Смотрите весь код на jsfiddle .

Сегодня мы поговорим о том, как создать адаптивное меню, используя только CSS3. Почему именно адаптивное? Мне кажется, это очень важно и должно стать нормой, ведь уже сегодня огромное число людей заходят в интернет через мобильные девайсы (ipad-ы, iphone-ы...). Этим пользователям необходимо дать возможность удобной навигации по вашему сайту. Для решения данной задачи можно воспользоваться jQuery или JavaScript-ом, но сегодня мы рассмотрим нечто иное.

По сути, у нас будет обычное выпадающее меню, основанное на списке UL > LI. Если же мы уменьшим экран, то все подменю будут доступны по клику. Давайте посмотрим, что у нас должно получиться:

Шаг 1. HTML

Вот и html код нашего демо примера:

index.html

Тут я бы хотел отметить один момент - meta с атрибутом name=’viewpoint’. Это тег необходим для правильного масштабирования содержимого страницы на вашем экране, будь то монитор компа или мобилка. Весь остальной код не сложен для понимания. Многоуровневый список UL > LI.

Шаг 2. CSS

Итак, стили. В первую очередь, для самой страницы:

css/main.css

* { margin: 0; padding: 0; } html { background-color: #fff; height: 100%; } body { color: #333333; font: 0.75em/1.5em Arial,sans-serif; } .container { margin-left: auto; margin-right: auto; margin-top: 30px; width: 96%; }

Теперь напишем стили для верхних элементов меню:

/* common and top level styles */ #nav span { display: none; } #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: #F5F5F5; border-bottom: 5px solid #333333; float: left; margin-left: 1%; margin-right: 1%; position: relative; width: 98%; } #nav ul.subs { background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; display: none; left: 0; padding: 2%; position: absolute; top: 54px; width: 96%; } #nav > li { border-bottom: 5px solid transparent; float: left; margin-bottom: -5px; text-align: left; -moz-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } #nav li a { display: block; text-decoration: none; -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; white-space: normal; } #nav > li > a { color: #333333; display: block; font-size: 1.3em; line-height: 49px; padding: 0 15px; text-transform: uppercase; } #nav > li:hover > a, #nav > a:hover { background-color: #F55856; color: #FFFFFF; } #nav li.active > a { background-color: #333333; color: #FFFFFF; }

Реализуем стили для подменю (выпадающий список):

/* submenu */ #nav li:hover ul.subs { display: block; } #nav ul.subs > li { display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width: 33%; } #nav ul.subs > li a { color: #777777; line-height: 20px; } #nav ul li a:hover { color: #F55856; } #nav ul.subs > li > a { font-size: 1.3em; margin-bottom: 10px; text-transform: uppercase; } #nav ul.subs > li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; } #nav ul.subs > li li:hover { padding-left: 15px; }

Отлично. Теперь самое главное - каким образом меню станет адаптивным? На самом деле всё очень просто! Воспользуемся CSS3 медиа запросами, которые определят, какие из стилей отображать в зависимости от размеров пользовательского экрана. Также преобразовывать меню мы будем с помощью следующей хитрости. В нашем HTML коде, сразу за верхними уровнями меню, я поставил специальные SPAN-ы. Их мы и будем использовать, присвоив активное состояние (псевдо класс:target), при клике по верхним элементам меню. Таким образом, будет открываться подменю. Смотрим код:

/* responsive rules */ @media all and (max-width: 980px) { #nav > li { float: none; border-bottom: 0; margin-bottom: 0; } #nav ul.subs { position: relative; top: 0; } #nav li:hover ul.subs { display: none; } #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs { display: block; } #nav ul.subs > li { display: block; width: auto; } }

Итог

Итак, только что мы с нуля наклепали прикольное адаптивное меню. Надеюсь, оно вам пригодится. Удачи! До новых встреч!

Похожие статьи на эту тему:

Добавляем HTML

Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.

Последняя строка отвечает за навигацию при маленьком разрешении экрана.

Добавляем CSS

Архив с примером содержит файл style.css .
В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css , то не забудьте подключить его в свой html файл между тегами .

Добавляем JQuery

Из архива копируем папку js. И подключаем скрипты в наш html документ.

Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!

Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.