простое адаптивное меню css
Как с помощью CSS создать адаптивное выпадающее меню навигации
Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.
Верхняя панель навигации крайне важна для любого сайта. В этой статье описана одна из реализаций, которая адаптивна. А также не использует JavaScript для переключения выпадающего списка на мобильных устройствах.
Настройка
Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.
Создайте файл styles.css и подключите его в HTML-документе:
Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.
Добавьте следующий HTML-код в тег
Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.
В файл styles.css добавим несколько стилей для всех элементов:
Затем примените эти стили к header.
Теперь темная панель навигации растягивается на всю ширину окна просмотра.
Добавьте приведенные ниже стили к классу menu-wrap:
Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.
Стилизуем каждый из этих дочерних элементов один за другим.
В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:
Теперь добавьте стили списка и ссылок:
Также добавьте для ссылок стили при наведении и фокуса:
Теперь в браузере отображается следующее:
Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:
Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.
Хак с чекбоксом
Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.
Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!
В файле index.html добавьте элемент checkbox перед элементом nav:
В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.
Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:
Для больших экранов
Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.
Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.
В нем сначала спрячьте иконку меню.
Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.
Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.
Теперь вы знаете, как создать адаптивное выпадающее меню навигации, которое отображает пункты на навигационной панели для больших экранов. Но при этом отображает иконку гамбургера для небольших экранов.
СКАЧАТЬ ИСХОДНЫЙ КОД
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!
Адаптивное меню с помощью HTML + CSS
Этот пример навигационной панели состоят из вертикального и горизонтального меню, а также из выпадающих и выпадающих под категорий. Если смотреть на широком мониторе, то наблюдаем горизонтальную панель, а на горжетах идет вертикальная, где с левой стороны расположена кнопка для открытия всех запросов. Эта навигация выполнена по стандарту, где идет стильное мобильное меню.
Все изначально проверено, где корректно выводит, но разве только добавил стилей, чтоб сделать обводы под знаки, это намного ярче смотрится. Но переходя на мобильную работу, там можно аналогично поставить другие оттенки, но здесь оставил как идет открытием страницы.
1. При открытии сайта или страниц на нем:
2. Переход под мобильные аппараты, где видим панель с кнопкой:
3. При нажатии на кнопку, то автоматически появляется большая панель с аналогичными запросами, как на широком экране, только уже вертикальном положение.
Стили и шрифтовые кнопки
nav <
display: block;
background: #374147;
>
.kesponsive-navigan <
display: block;
>
.kesponsive-navigan li <
display: inline-block;
position: relative;
z-index: 100;
>
.kesponsive-navigan li:first-child <
margin-left: 0;
>
.kesponsive-navigan li a <
font-weight: 600;
text-decoration: none;
padding: 30px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
>
.kesponsive-navigan ul <
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
>
.kesponsive-navigan ul li <
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
>
.kesponsive-navigan ul li a <
font-size: 14px;
font-weight: normal;
display: block;
color: #eae7e7;
background: #1d1b1b;
>
.kesponsive-navigan li:hover>ul <
visibility: visible;
opacity: 1;
transform: translate(0,0);
>
.kesponsive-navigan ul ul <
left: 169px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
>
.kesponsive-navigan li>ul ul:hover <
visibility: visible;
opacity: 1;
transform: translate(0,0);
>
.navigatsiya-portala <
display: none;
width: 100%;
padding: 30px 17px;
background: #374147;
color: #fcffe1;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
>
.navigatsiya-portala:hover <
background: #152e38;
color: #f5eeee;
text-decoration: none;
>
a.homer <
background: #2577b1;
>
@media (min-width: 768px) and (max-width: 979px) <
.mainWrap <
width: 768px;
>
.kesponsive-navigan ul <
top: 37px;
>
.kesponsive-navigan li a <
font-size: 12px;
>
@media (max-width: 767px) <
.mainWrap <
width: auto;
padding: 50px 20px;
>
.kesponsive-navigan <
display: none;
>
.navigatsiya-portala <
display: block;
>
nav <
margin: 0;
background: none;
>
.kesponsive-navigan li <
display: block;
margin: 0;
>
.kesponsive-navigan li a <
background: #191918;
color: #b3b3b0;
>
.kesponsive-navigan li a:hover,.kesponsive-navigan li:hover>a <
background: #118ab9;
color: #f6f7ef;
>
.kesponsive-navigan ul <
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
>
.kesponsive-navigan li:hover>ul <
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
>
.kesponsive-navigan ul ul <
left: 0;
transform: initial;
>
.kesponsive-navigan li>ul ul:hover <
transform: initial;
>
>
@media (max-width: 480px) <
>
@media (max-width: 320px) <
>
$(touch).on(‘click’, function(e) <
e.preventDefault();
menu.slideToggle();
>);
Панель начальной загрузки также включает в себя выпадающий список начальной загрузки, а также различные анимационные эффекты. Где вся стилистика под гамму цвета, которая идет по умолчанию и при наведении курсора, то она редактируется в прикрепленных стилях, что каждый веб-разработчик самостоятельно может поставить ту палитру оттенка, которая соответствует основному дизайну на сайте.
Простое адаптивное меню css
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Анимация фона при прокрутке страницы
Анимируем SVG фигуры при прокрутке страницы.
Пример 3D помещения выставки
Экспериментальная 3D проекция помещения галереи.
Адаптивное меню для сайта на CSS
Дата публикации: 2013-02-21
В этом уроке мы научимся создавать адаптивное меню с помощью CSS.
От автора: я уже писал учебник о том, как сделать мобильную навигацию для адаптивного дизайна, теперь я открыл новую методику создания адаптивного меню без применения Javascript’а. В нем используется чистая семантическая разметка HTML5. Меню можно выравнивать по левой стороне, по центру или справа. В отличие от предыдущего учебника, где его нужно переключать, это меню переключается при проведении мышью, что более удобно для пользователя. В нем также имеется индикатор, показывающий активный/текущий элемент меню. Оно работает во всех мобильных и настольных браузерах, включая Internet Explorer!
Цель урока «Создание адаптивного меню для сайта»
Цель урока по созданию адаптивного меню для сайта — показать вам, как на маленьком дисплее превратить обычное меню-список в выпадающее меню.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Этот прием практично применять при навигации с множеством ссылок, как ниже на скриншоте. Все кнопки можно сжать в элегантное выпадающее меню.
Разметка nav HTML
CSS-код для адаптивного меню сайта (с точки зрения компьютера-десктопа) довольно прост и незамысловат, поэтому я не собираюсь вдаваться в детали. Обратите внимание, что я задал для элемента nav li display:inline-block вместо float:left. Это дает возможность кнопкам меню выравниваться по левой стороне, центру или справа путем определения text-align для элемента ul.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Выравнивание по центру и правой стороне
Как уже говорилось, менять выравнивание кнопок можно с помощью свойства text-align.
Поддержка Internet Explorer’а
Тэг HTML5 nav и медизапрос не поддерживается Internet Explorer’ом 8 и более старыми версиями. Для альтернативной поддержки включите css3-mediaqueries.js (или respond.js) и html5shim.js. Если не хотите добавлять html5shim.js, замените тэг nav тэгом div.
Создание адаптивности меню в сайте
Теперь начинается самое интересное – делаем меню адаптивным с помощью медиазапроса! Прочтите мои предыдущие статьи об адаптивном дизайне и медиазапросе, если ранее с ними не знакомы.
Как сделать простое адаптивное меню с помощью CSS3
Навигационное меню один из самых важных элементов любого сайта, важный, но в плане исполнения, достаточно простой. При рассмотрении, чаще всего, это неупорядоченный список с заданным стилем смещения влево и с тем или иным сформированным внешним видом. Появление мобильных пользовательских устройства, с различными размерами экранов, внесло существенные коррективы в веб-разработку и новые требования к дизайну сайтов. Хотим мы этого или нет, адаптивный дизайн это тренд, и на данном этапе он диктует правила.
Добиться того, чтобы сайты одинаково хорошо смотрелись на экранах различных мобильных устройств, стало сложнее, но игра стоит свеч. Элементы пользовательского интерфейса сайтов, в том числе и меню навигации выполненные в технике адаптивной верстки, корректно отображаются на экранах всех типов устройств, от монитора настольного компьютера, до экрана мобильного телефона. Так что, научиться азам адаптивной верстки, будет, как минимум не лишним. Собственно говоря, именно этим мы сегодня и займемся.
Предлагаю на рассмотрение, технику создания простого, очень гибкого в настройках, и к тому же достаточно эффективного, адаптивного меню, с использованием чистой семантической HTML5 разметки, для реализации адаптивной конструкции, без подключения javascript. В результате с помощью CSS мы получим меню, которое может быть выравнено влево, вправо или располагаться точно по центру, выделяемые активные/текущие пункты, меню способное при изменении размера окна браузера, быстро перестраиваться в раскрывающуюся, вертикальную навигационную панель, которая замечательно смотрится на экранах различных мобильных пользовательских устройств(планшеты, смартфоны, ноутбуки и мобильные телефоны).
Пример посмотрели и убедились в работоспособности нашего меню. Такой способ, в целом очень полезен, когда в меню используется большое количество ссылок. В с легкостью сможете сгрупировать все кнопки в одну, раскрывающуюся при наведении, привлекательную панель.
HTML Разметка
Перво-наперво нам необходимо выполнить разметку всей основной конструкции нашего меню. Мы создаем элемент навигации, а значит логичным и даже практичным, будет применение HTML5-элемента, тега
Всё. С основной разметкой мы разобрались, классы прописаны, костыли добавлены. Теперь перейдем к определению стилей пунктов меню, сформируем внешний вид и с делаем наше меню по-настоящему адаптивным.
CSS Определяем стили
Выравнивание по центру и вправо
Адаптируем меню
Начинается самое интересное. Наше меню на данном этапе имеет резиновый формат(ширина определяется в процентах) и пока совсем не адаптивное. Начните изменять размер экрана и вы увидите, что меню выстраивается в хаотичное нагромождение кнопок.
На этом, пожалуй и всё! Наше замечательное, стопроцентно-адаптивное меню готово, в чем вы можете убедиться еще раз посмотрев пример. Для более детального изучения материала, вы можете скачать исходники и спокойно, без лишней суеты, вникнуть в тему.
Урок подготовлен по материалам Web designer wall
Вольный перевод и адаптация: Андрей /driver/
Удачи!
Буду очень признателен, если поделитесь ссылкой на этот урок в своих соц-сетях:
Всего комментариев: 41
Вы на телефоне пробовали таким меню попользоваться?
А ВЫ? В чём вопрос то? Пробовал конечно, всё сначала тестирую, и…
присоединяюсь. Вы на телефоне пробовали таким меню попользоваться?
дело в том что когда кликаешь на телефоне то выбирается сразу активный пункт, смысл в том что меню должно раскрыться по клику а не в момент когда под тапом или мышью.
Видимо бессмысленно доказывать,что тестировал на телефоне и не один раз, должно ли раскрываться меню только по клику, может быть для вас очевидно так, у меня же меню раскрывается при наведении (используем hover), это всего лишь пример, никто не мешает вам доработать его под себя или найти готовое решение. отвечающее всем вашим требованиям
На сенсоре нету такой функции как наведение, происходит сразу клик. И при попытки раскрыть меню с телефона срабатывает адресация на ссылку. Попробуйте например onclick (alert (‘+’)); или реальные ссылки добавить и поймете в чем косяк Вашего примера
Очень глупый вопрос, как сделать мобильную версию меню по центру, туплю.
Бывает))) Смотрите в статье раздел «Выравнивание по центру и вправо», всё предельно ясно расписано и приведены примеры кода CSS
Алексей правильно высказал мнение о проверке на телефоне, в сенсорных телефонах курсора нету, даже если есть, многие не умеют пользоваться ими.
И как быть? если прикоснуться к меню оно откроет текущий пункт меню, пожалуйста объясните в этом вопросе по подробнее, потому что мы тут все новички-светлячки
Всё оно нормально нажимается и работает. Единственный нюанс, после открытия и выбора соответствующего меню, не закрывается/сворачивается иконка этого меню.
Столкнулся с той же проблемой. Видимо ее придется решать подставляя в адрес current #
Очень красивое меню (строгое, аскетичное, стильное).
Но как же всё-таки избавиться от некорректной работы на телефонах (то, о чём писали ранее)?
Не могли бы Вы отредактировать этот урок?
Даже я не сдержусь. А в чем проблема? Всё работает при клике. Меню открывается. Список выпадает. Никуда ничто не пропадает. Если нужно эмитировать :hover эффект, то просто напросто добавляем aria-haspopup=”true” в тег, на котором срабатывает :hover. Всё!
А то что в сенсорных телефонах нет состояния наведения (hover), там же касания, а не курсор мышки. И потому данное меню трудно назвать адаптивным под все устройства. Оно просто сворачивается и занимает меньшее пространство.
А так спс, за пост!
Идея подана, а там хоть лом прикрутите)))
stihok.ru опубликовать произведения, ну и т.д.
Делал мобильную версию, по дизайну меню подошло. Правильно писали выше — при нажатии срабатывает сразу первая ссылка. Я просто убрал ссылку и написал «МЕНЮ» )), так как попасть пальцем в маленький полосатый квадратик было сложно. Всё нормально работает, есть правда один нюанс — в содержании есть то же пункты меню, вот они вылазят по верх этого меню. Вопрос — как это исправить? Заранее спасибо!
Ну вот у меня на galaxy S4 (на новых моделях скорее тоже) есть функция срабатывания при наведение… hover отлично отрабатывает, но особого смысла на самом деле я в этом не вижу. Для меня куда более удобно когда меню открывается при тапе (на мобильных девайсах естественно)
Уважаемые,подскажите; куда вставляется картинка noise.png из архива?
driver, большое спасибо за разъяснение. Я только еще учусь ))
у меня при проверке на мобильных десктопах вместо меню расположена просто узкая серая линия (это граница: border: solid 1px #aaa;) Если коснуться этой границы где-то задевается меню и оно выскакивает.
А еще…когда нажимаешь на пункт адаптивного меню и переходишь на соответствующую страницу, там меню показывается уже не адаптивное.
А у меня обнаружилась такая проблема. В готовом варианте при постепенном уменьшении размера окна браузера пункты меню смещаются также, как описано в подразделе «Адаптируем меню». И только при минимальном размере окошка вместо сместившихся пунктов меню пропадают все, кроме первого пункта.
У Вас на демо такого нет.
Не понимаю, что сделала неправильно. Вроде бы все повторила в точности.
И еще раз проверила. Просмотрела исходный код страницы «Демо».
Скопировала оттуда соответствующий код + открыла указанный там файл со стилями.
Скопировала в редактор, открыла в браузере — все работает. Значит, ошибка где-то в коде, который приведен в статье.
Автор, проверьте, будьте добры. Это отличное меню. Было бы прекрасно, если бы заработало сразу. Не пришлось бы заглядывать к Вам в код. (за это уж извините — очень было нужно, чтобы заработало).
А так, статья очень мне пригодилась. Даже я — совершенный новичок в CSS, а все ж таки в итоге получила то, что хотела.
Спасибо! И проверьте, все-таки, код, приведенный в примере.
Нет, спасибо. Меня все очень устраивает в таком виде, как сейчас. Я хотела только обратить Ваше внимание на то, что при постепенном уменьшении размера окна страницы(код которой написан в соответствии с приведенным Вами в уроке) все пункты меню смещаются и отображаются «как им вздумается».
Попробуйте сами этот код внести в редактор (у меня Dreaweaver) и открыть просмотр в браузере. (Именно код, который Вы привели в примере. Он, видимо, немножко отличается от того, который Вы использовали для создания «Демо») И уменьшайте окно постепенно.
В варианте из статьи: на определенном этапе уменьшения размера окна браузера получается смещение пунктов меню. Не исчезновение их, как в варианте «Демо», а сначала они сдвигаются беспорядочно, и только потом пропадают при дальнейшем уменьшении. Это, я думаю, не есть хорошо, т.к. никто не знает, какого размера окно браузера у посетителя сайта. Может, он не разворачивает окна максимально, или новое окно у него настроено открываться не полноразмерным.
А при использовании кусочка кода Вашей страницы «Демо» такого перехода нет. Все пункты меню, кроме активного сразу пропадают при значительном уменьшении окна. И остается только пункт «Главная», как и должно быть. Без этого несимметричного смещения.
Я не проводила сверки одного кода и другого. Мне, как новичку, придется по символам сверять, я не очень хорошо понимаю, что именно и где указано. А Вы, наверняка, быстрее меня увидите различия.
Где-то там есть это расхождение. Раз из примера не работало корректно, а из демо — заработало отлично.
В любом случае, большое Вам спасибо! 🙂
О, ништяк. Сейчас ништяки на css мне нравятся. Не надо js лишний раз использовать. html+css классика)
Хорошо сделано, переделал под дизайн сайта и моб.версия стала проще. Разработчику огромное спасибо.
Привет, а как полностью скрыть основное меню для мобильных устройтв? Чтоб ни ссылок ни кнопки с навигационным полем не показывать?
а в зависимости от @media display, не?
Спасибо за статью, очень интересная. Смущает одно … У Вас ус отклеился… указали класс для хранения состояния выбранного элемента — а как вы потом тыкая по элементу будете этот класс перекидывать на другой элемент без js кода?
Здравствуйте, Dimon.
Дык дело то всё в том, что в данной статье элементарно расписан ещё один вариант (из многих) css-вёрстки менюшки под мобильные устройства и всего лишь, дальше вы можете прикрутить всё что угодно (jQuery Cookie например).
Добый ень,отличное меню. Скажите а как можно вместо иконки в мобильной версии вывести текст, меню?
Спасибо разобрался! У меня изначально иконка тоже не выводилась … Оказывается она привязана к классу
Полезная статья. Спасибо!
Минус есть существенный — выпадающее меню не убирается по клику.
Добрый день! Проблема с картинкой. Если быть точнее, она не отображается. С чем это может быть связано?
Спасибо большое, отличная статья, помогли!
подскажите как увеличить пункты меню в изначальном варианте