стильное меню для сайта
Большой обзор красивых многоуровневых меню с codepen
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Responsive Mega Menu — Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu — Menu Interaction Concept
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
50 примеров выпадающих меню в веб-дизайне
Ключевым фактором построения эффективного пользовательского интерфейса является понятная и грамотная навигация по сайту. Выпадающие меню идеально подходят для сайтов, в которых требуется реализовать многоуровневую иерархию разделов. Стандартная модель дизайна выпадающего меню заключается в наведении курсора мыши по основному разделу, после чего появляется субменю.
В данной коллекции мы представляем вам много различных типов выпадающих меню, которые используются в веб-сайтах со всей сети Интернет. Они могут помочь вам вдохновиться на собственные идеи относительно навигационных меню.
Pure Grips в своем выпадающем меню использовали изображения, посредством чего пользователь может четко понимать, где расположены нужные ему товары.
При наведении на каждую из машин, изображение с правой стороны меняется. Это выглядит еще более впечатляюще, если использовать полупрозрачный фон.
На сайте B&Q мы видим чистое и привлекательное выпадающее меню, которое отображает нам колонки с товарами.
Данное меню навигации идеально подпадает под дизайн, а розовый цвет при наведении создает определенный эффект.
Этот дизайн выпадающего меню представляет собой тему оформления веб-сайта, будто нарисованную от руки.
Это выпадающее субменю оснащено прекрасным эффектом анимации.
В этом превосходном выпадающем меню применили интересный эффект оранжевого цвета при наведении.
На сайте Converse мы видим интересное выпадающее меню в гранджевом стиле с применением текстуры одежды.
Это темное выпадающее меню на самом деле хорошо выделяется на фоне дизайна сайта.
Это выпадающее меню очень функционально, а также выполняет функцию иллюстрированной визуализации различных стилей солнечных очков.
На сайте Netttuts+ мы видим чистое выпадающее меню, которое вполне привлекательно за счет использованных цветов в заголовках.
Это выпадающее меню достаточно уникально, так как кроме субменю тут еще и навигация с вкладками.
Выпадающее меню в этом дизайне выполнено с интересными вьющимися углами и красивой визуализацией, которая отображает фотографии продуктов производителя.
Этот грубый дизайн веб-сайта в гранджевом стиле оснащен угловатым выпадающим меню, которое придает общему виду дизайну особую эстетику.
Это выпадающее меню заостряет внимание на мелких деталях дизайна.
Это простенькое выпадающее меню вполне практично и не отвлекает от основных областей разметки веб-сайта.
Здесь мы видим чистое выпадающее меню, которое идеально вписывается в общий дизайн сайта.
Это навигационное меню очень светлое и имеет необычную форму.
Это выпадающее меню содержит миниатюры моделей автомобилей от производителя. Когда вы наводите курсор мыши на машину, вам отображаются ссылки на страницы, относящиеся к модели.
Это выпадающее меню навигации отображает нам вкусное печенье, на производстве которого специализируется владелец сайта.
Дизайн веб-сайта, выполненный в бумажном стиле, оснащен вполне красивым и чистым выпадающим меню.
На сайте Electronic Arts есть очень задорное выпадающее меню.
На сайте Bonfire Snowboarding реализовано великолепное выпадающее меню, состоящее из трех колонок, которое можно увидеть, если навести на вкладку «Товары» («Products»), расположенную в основном меню.
В системе Facebook тоже есть выпадающее меню, в основном меню Аккаунта; с его помощью вы можете попасть на остальные страницы редактирования анкеты.
Для отображения субменю, вам нужно будет навести курсор, кликнуть левой кнопкой, и немного подержать её. Затем вы можете переместить курсор мыши к любой ссылке, которая вам понадобится. Очень интересное и нестандартное решение по дизайну, требующему взаимодействия.
Это темно-синее навигационное меню действительно выделяется.
Веб-сайт представляет чистое и стандартное навигационное меню.
Красный и белые текст на полупрозрачном черном фоне создают некий шарм.
Действительно красивое выпадающее меню.
Это навигационное меню несколько особое, учитывая четкость и креативность. Коричневый цвет хорошо выделяется среди остальных цветов, использованных в дизайне веб-сайта.
В каждом пункте меню использованы разные шрифты, а само выпадающее меню достаточно четкое и опрятное.
Белый фон, синий текст и красные границы верхушки и подвала символизируют цвета флага США.
Примененные здесь цвета очень хорошо сочетаются друг с другом, будто игроки на поле.
Еще один веб-сайт, посвященный одежде, на котором мы видим выпадающее меню. Такая структура выпадающих субменю очень способствует поиску товара. На сайте использована разметка выпадающего меню в несколько колонок.
На сайте Fall for Tennessee есть горизонтальное выпадающее меню, которое скользит в правую сторону. Пункты меню, в которых есть субменю, оснащены небольшой стрелочкой, чтобы пользователь мог понять, что пункт может быть развернут.
На сайте Sony есть широкое и простенькое выпадающее меню. На официальной британской версии сайта.
Это выпадающее меню отображает множество цветов, которое соответствует остальным цветам на сайте. Большой размер текста и весь дизайн в целом выглядят вполне впечатляюще.
На сайте Media Temple, наверное, лучший вариант реализации выпадающего меню из всей сегодняшней подборки. Маленькая миниатюра каждого типа хостинга рядом с наименованием выглядит круто, а также стоит отметить прекрасные переходы, реализованные посредством javascript.
На сайте Mozilla мы также можем видеть простенький, но очень удачный вариант выпадающего меню.
Эффект полупрозрачности в этом выпадающем меню отлично взаимодействует с яркими цветами фонового изображения.
Основной цвет навигации хорошо сочетается с субменю выпадающих пунктов.
Классические субменю выпадающей навигации Digg отлично взаимодействует с дизайном в целом.
Это навигационное меню можно назвать особым из-за отличного эффекта тени, который на самом деле привлекает внимание на странице.
Very – новый интернет-магазин, на котором реализовано опрятное и структурное выпадающее меню навигации.
Выпадающее меню на сайте Incase немного светлее основного фона меню, и это отлично взаимодействует с общим внешним видом веб-сайта.
Нам очень понравился вариант меню, реализованный на сайте American Eagle – навигация заполняет всю ширину страницы и представляет собой опрятный элемент с бумажной текстурой.
Цвета, использованные в этом выпадающем меню (и сайте, в целом) очень яркие.
На сайте Select Clothing выпадающее меню выполнено с темным фоном, что выделяет его среди скользящих изображений снизу.
Это выпадающее меню особое, так как тут использованы интересные цвета, которые выделяют навигацию из общего дизайна страницы. Нам также очень понравилось фоновое изображение, которое отображено в нижней части каждого пункта выпадающего меню.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
«Скручиваем» выпадающее меню на CSS3
Выпадающее меню на CSS с использованием Font Awesome 4.0
Создаем навигацию в стиле Amazon на jQuery
Выпадающее меню в плоском стиле на чистом CSS-коде
48 бесплатных выпадающих меню на HTML5 и CSS3
26 полезных руководств на тему навигационных меню на jQuery
Создаем простенькое выпадающее меню при помощи jQuery
Создаем выпадающее вертикальное меню посредством jQuery
Бесплатное горизонтальное меню от PhatFusion
Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!
Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.
Если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые мы здесь предоставляем, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то этому энтузиасту придется самостоятельно искать настоящего автора материала.
Горизонтальное меню для сайта на HTML+CSS
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.
Пример использования html тегов для создания меню в коде ниже:
Стандартные CSS стили для горизонтального меню
Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего будущего меню
Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнего» меню
Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.
Главное меню, расположенное на цветной линии с красным фоном
CSS стили меню на цветной линии
Выпадающее меню на HTML+CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML код выпадающего меню
Стили CSS выпадающего меню
А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.
Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: 
Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.
Благодарю за внимание.
спасибо огромное! коротко, ясно и работает. все что нужно нашел.
А как по центру страницы сделать меню? все перепробывал((
Вам нужно сделать подобную конструкцию:
Ну у меня не получается. Такое ощущение что в примере нет подключения к css файлу, на странице все отображается как текст, без оформления.
В примере — встроенные интерактивные меню, там CSS подключается к html странице автоматически. Вам же необходимо либо прописать CSS прямо в html коде при помощи конструкции:
Либо (что более правильно) создать отдельный файл CSS и на вашей странице подключить данный файл.
Я создал отдельную папку css. Я новичок, может что спрашиваю не корректно, Буду пробовать подключать.
Если у вас отдельная папка, а в ней находится ваш файл CSS, то необходимо на вашей HTML странице в добавить строчку
Таким образом вы подключите файл со стилями к вашей HTML-странице
Разумеется, вам нужно заменить ВАША_ПАПКА и ВАШ_ФАЙЛ_СО_СТИЛЯМИ на существующие названия документов.
Очень помогли, спасибо большое
классный сайт, все наглядно и по полочкам.
Теперь всё ясно. СПС!
Здравствуйте. Только начинаю изучать программу. Спасибо за подсказки. Есть один вопросик. Как сделать по центру МЕНЮ если там у меня страниц много например 15
Отображется в две строки но не центрируется в браузере. экспорт был сделан просто в шаблон сайта.
Приветствую, вероятнее всего вам необходимо задать свойства css для родительского элемента меню
text-align:center;
margin: 0 auto;
День добрый, использовал ваш пример «Главное меню, расположенное на цветной линии с красным фоном» вставил в div блок настроил все хорошо, но отключение переноса и маркеров списков перенеслось по умолчанию в другие div блоки. Делал все через таблицу стилей с отдельным файлом css, как можно исправить чтоб отключение списков и маркеров работало только в одном div блоке?
Добрый
Вам необходимо задать родительскому div, в котором находится ваше меню какой-то класс, например menu, т.е. это будет выглядеть так:
Ссылки не кликабельные получаются почему-то.
В данном примере ссылки указаны в формате
для того, чтобы не было некорректных переходов. Вам необходимо поставить свои актуальные ссылки, например
здравствуйте!не получается сделать выпадающее меню,его видно постоянно…что не так?подскажите пожалуйста. заранее спасибо
Приветствую, у вас определенно проблема в том, что стили меню перекрываются, а именно — вот эта часть
Для того, чтобы это исправить, вы можете, например, поставить для родительского тега div, который оборачивает меню, новый класс. Допустим это будет new-menu. После чего проставьте перед нужным стилем ваш новый класс, т.е. в данном случае это будет
спасибо, я просто не внимательна-допустила ошибку…
А как осуществить переход в конкретное место при нажатии?
Вам нужно вместо href=»#» писать адрес своих страниц. Например, href=»/contacts»
Вставила код меню в свой сайт. После этого все ссылки сайта отображаются в виде блоков, как блоки меню
Приветствую. У вас подобная проблема, что уже описывалась в комментариях. Вам нужно задать родительскому div, в котором находится ваше меню какой-то класс, например menu, тогда это будет похоже на:
Спасибо! Стало понятно! 🙂
А после чего писать все эти стили и куда?
Стили вы можете вставить как в саму страницу (что в body, что в head, но правильней вставить отдельный css-файл. Если вы работает с CMS, то такой у вас наверняка есть.
А как так вышло что маркерный список превратился в меню? В чём секрет? Я в восторге!
Сделал выпадающее меню, оно состоит из двух элементов. Проблема в том что первый элемент списка отображается нормально, а второй прозрачным и окрашивается только после наведения.