Адаптивное меню на css. Большой обзор красивых многоуровневых меню с codepen

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

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

Задача понятная, внутри тега section будет находится шапка сайта header , внутри которой блок div с логотипом и навигационная панель nav . Она будет использоваться, как контейнер для меню из маркированных списков ul с пунктами меню-ссылками a .

• Главная


• Поиск


• Услуги


• Новости


• Фотографии


• Правила

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

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

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

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

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

Background-size: cover;
height: 100vh;

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

Background-repeat: no-repeat;

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

Background-position: center center;

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

Немного забежим вперёд и посмотрим из каких блоков будет состоять шапка - это блок 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 {
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 .

Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.

Спасибо вам, что подкидываете таким образом новые идеи и помогаете развивать блог. Кстати, на какую тему хотели бы почитать следующую статью? Напишите в комментариях пожалуйста, для меня это очень важно. А теперь, давайте начнем…

Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

Начнем с html. Прежде всего подключим библиотеку jquery. Наверняка, вы давно ей пользуетесь, поэтому убедитесь, что не подключаете ее второй раз:

Теперь разметка. Обычный ненумерованный список, и небольшой div, который содержит иконку меню. Она будет видна только на маленьких разрешениях.

Скачать прайс

Контакты

Отзывы

Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }

Теперь, при уменьшении окна браузера вы увидите следующую картину:

Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.

Когда мы начинаем работать с адаптивным дизайном, мы сталкиваемся с различными техниками того, как лучше обработать изменение нашего навигационного меню для экранов с низким разрешением. Возможности кажутся бесконечными. Поэтому, я покажу вам четыре главных подхода с их достоинствами и недостатками. Три из них сделаны с использованием только CSS и один - с небольшим количеством JavaScript.

Все подходы в этой статье используют простой HTML код, который я называю «базовое меню». Атрибут role используется чтобы указать определенный тип: горизонтальное меню (full-horizontal), выпадающий список (select), ниспадающее меню (custom-dropdown) и canvas.

• Stream
• Lab
• Projects
• About
• Contact

@media screen and (max-width: 44em) { }

• Stream
• Lab
• Projects
• About
• Contact

@media screen and (max-width: 44em) { nav { ul > li { width: 100%; } } }

• Не требуется JavaScript
• Никакой лишней разметки
• Простой код стилей

• Занимает слишком много места на экране

Чтобы добиться такого эффекта нам нужно добавить в базовую разметку выпадающий список. Чтобы он работал нам придется добавить JavaScript код, который изменяет значение window.location .href когда происходит событие onchange
Stream Lab Projects About Contact
Скрываем список на больших экранах:
nav { > select { display:none; } }
На маленьких экранах скрываем базовое меню и показываем выпадающий список. Чтобы помочь пользователю понять, что это меню - мы добавим псевдо-элемент с тектом «Меню»
@media screen and (max-width: 44em) { nav { ul { display: none; } select { display: block; width: 100%; } &:after { position: absolute; content: "Menu"; right: 0; bottom: -1em; } } }
С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:

• Не занимает много места
• Использует «собственные» элементы управления

• Для работы требуется JavaScript
• Происходит дублирование содержимого
• Выпадающий список не удается стилизовать во всех браузерах

H1 ~ p { color: black; } h1:hover ~ p { color: red; }
Это не оказывало никакого эффекта, потому что хак с чекбоксом использовал псевдокласс:checked с селектором ~ . И пока баг не был исправлен в WebKit 535.1 (Chrome 13) и в актуальном для Android 4.1.2 WebKit 534.30, хак не работал ни на каком устройстве с ОС Android.

На больших экранах мы скрываем label.
label { position: absolute; left: 0; display: none; }
На маленьких экранах мы помешаем меню вне содержимого окна и показываем label и input. Чтобы скрыть меню мы устанавливаем для него ширину и отрицательное значение положения. Чтобы помочь пользователю понять, чтобы это меню, мы так же добавим псевдоэлемент с текстом "≡" в label (в виде кода "\2261", чтобы использовать как содержимое псевдоэлемента).

@media screen and (max-width: 44em) { $menu_width: 20em; body { overflow-x: hidden; } nav { position: absolute; left: -$menu_width; width: $menu_width; ul > li { width: 100%; } } label { display: block; } label:after { position: absolute; content: "\2261"; } input:checked ~ nav { left: 0; } input:checked ~ .content { margin-left: $menu_width + .5em; margin-right: -($menu_width + .5em); } }

С дополнительным оформлением так оно выглядит на экранах с небольшим разрешением:

• Не семантичный код (input / label)
• Требуется дополнительный HTML
• Абсолютное позиционирование элемента body вызывает ощущение зафиксированного положения

Предлагаю на рассмотрение, технику создания простого, очень гибкого в настройках, и к тому же достаточно эффективного, адаптивного меню, с использованием чистой семантической разметки, для реализации адаптивной конструкции, без подключения javascript. В результате с помощью CSS мы получим меню, которое может быть выравнено влево, вправо или располагаться точно по центру, выделяемые активные/текущие пункты, меню способное при изменении размера окна браузера, быстро перестраиваться в раскрывающуюся, вертикальную навигационную панель, которая замечательно смотрится на экранах различных мобильных пользовательских устройств(планшеты, смартфоны, ноутбуки и мобильные телефоны).

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

Перво-наперво нам необходимо выполнить разметку всей основной конструкции нашего меню. Мы создаем элемент навигации, а значит логичным и даже практичным, будет применение HTML5-элемента, тега с присвоенным ему одноименным классом, для последующего форматирования CSS стилей, а также создания и абсолютного позиционирования выпадающей навигационной панели. Класс current указывает на активную / текущую ссылку меню, внешний вид которой, сформируем с помощью css.

• Главная
• О Нас
• Портфолио
• Наши Услуги
• Контакты

Как видим, меню, это простой неупорядоченный список с определенным количеством ссылок. Количество пунктов может быть разным, но всё же не стоит городить огород, всё в разумных пределах.
Далее, пока не ушли далеко, хочу напомнить, а тем кто не знает, пояснить, что HTML5 и запросы media query не поддерживается IE версии старше 9-й(совсем неудивительно). Дабы избежать головной боли в будущем и сделать всё правильно, существуют специальные скрипты и , с помощью которого, мы сможем решить задачу совместимости, предусмотрительно подключив их к документу в разделе .

Всё. С основной разметкой мы разобрались, классы прописаны, костыли добавлены. Теперь перейдем к определению стилей пунктов меню, сформируем внешний вид и с делаем наше меню по-настоящему адаптивным.

Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал display:inline-block вместо float:left элемента