Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.
Перед тем, как мы начнем это руководство, вам понадобится следующее:
Доступ к контрольной панели вашего хостинга
Шаг 1 - Создание HTML-файла
Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html
. Для этого мы будем использовать Файловый менеджер
. Однако тот же результат может быть достигнут с использованием (создайте файл menu.html
на вашем компьютере и загрузите его на ваш хостинг).
Шаг 2 - Добавление кода HTML меню
Наше меню будет сделано из одного родительского элемента под названием Главное меню
и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс – dropdown
, mainmenubtn
и dropdown-child
. Классы необходимы для применения правил CSS.
Как вы видите, класс .dropdown-child
имеет CSS правило display: none
. Однако, как только пользователь проведет курсором (.dropdown:hover
) по родительскому элементу, это правило изменит его отображение на display: block
. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html
:
В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для .
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Заключение
Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.
В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.
В уроке задействуем:
display: flex;
используем transition
;
будем позиционировать элементы при помощи position
.
HTML структура горизонтального меню
П
ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm
, создаем index.html
файл, пропишем каркас html:5
, заменю lang
на ru
.
Все meta
удалю кроме кодировки, пропишу свой заголовок «Tom menu
».
Между body
пишем тег header
, а в нем блок с классом .dws-menu
в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#"
. Затем будет идти иконка I
с классом .fa .fa-
ul>li*5>a>i.fa.fa-
Жмем применить.
Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты
).
Далее отбираем и подключаем иконки. Переходим на сайт
Font Awesome , отберем себе иконки под данные пункты меню:
Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts
и папку css
в свою среду разработки.
В папке fonts
лежат шрифты иконок, а в папке css
их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css
.
В index.html
подключаем иконки, и прописываем каждому пункту свой стиль иконки (home
, shopping-cart
, cogs
, th-list
, envelope-open
).
Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css
и подключим его к index.html
. Для проверки, что стили подключены, создам папку img
, в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background
.
Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{
margin: 0;
padding: 0;
}
Зададим header
в 200 пик. и назначим
шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Затем позиционируем иконки, спискам присвоим position: relative;
для дальнейшее центровки иконок:
Dws-menu > ul li{
position: relative;
}
Dws-menu > ul li > a i.fa{
position: absolute;
top: 15px;
left: 12px;
font-size: 18px;
}
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI
присваиваем ему аналогичный бордюр.
Dws-menu > ul li:first-child{
border-left: 1px solid #b2b3b5;
}
.dws-menu > ul li:last-child{
border-right: 1px solid #babbbd;
}
Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведение
Dws-menu li a:hover{
background: #454547;
color: #ffffff;
box-shadow: 1px 5px 10px -5px black;
transition: all 0.3s ease;
}
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{
display: block;
background: #ececed;
padding: 15px 30px 15px 40px;
font-size: 14px;
color: #454547;
text-decoration: none;
text-transform:uppercase;
transition: all 0.3s ease;
}
Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее меню CSS / HTML
О
ткрываем index.html
и добавим, к примеру, в продукцию дополнительное меню. Между списками LI
вставляем UL
, в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#”
.
ul>li*5>a
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия
).
Одежда
Электроника
Продукты питания
Инструменты
Быт. химия
Затем открываем style.css
и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute;
, зададим минимальную ширину в 150 пик.
/*sub menu*/
.dws-menu li ul{
position: absolute;
min-width: 150px;
}
Пропишем спискам border
в 1 пик.
Dws-menu li > ul li{
border: 1px solid #c7c8ca;
}
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5;
.
Dws-menu li > ul li a{
padding: 10px;
text-transform: none;
background: #e4e4e5;
}
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны
) и сохраняемся.
Электроника
Камеры
Компьютеры
Телефоны
Они вывелись, но скрыты под основным меню, теперь position: absolute;
вложенного UL
и сдвинем его на 150 пик. в сторону:
Dws-menu li > ul li ul{
position: absolute;
right: -150px;
top: 0;
}
А для их появления отберем списки при наведении и отобразим их при помощи display: block;
.
Dws-menu li:hover > ul{
display: block;
}
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL
, изменением его пунктов.
Главная
Продукция
Одежда
Обувь
Куртки
Брюки
Электроника
Камеры
Компьютеры
Телефоны
Samsung
Flf
Apple
Продукты питания
Инструменты
Быт. химия
Услуги
Услуга 1
Услуга 2
Услуга 3
Новости
Контакты
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
Хабр, привет!
На С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
Горизонтальное меню с очень крутой анимацией без js! http://codepen.io/devilishalchemist/pen/wBGVor
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
Решение неплохое, но слишком уж много используется классов. Радует, что нет 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
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит. http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту. http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
Навигация по странице:
И так, наша задача:
сделать горизонтальное меню с выпадающим списком css (на списках ul li) без использования jQuery и Javascript, а также без применения таблиц
в коде.
Выпадающее горизонтальное меню html
Первым делом, перед тем как приступать писать код, нам нужно сделать html шаблон для меню.
В связи с тем, что мы делаем универсальное меню, я хочу его сделать максимально похожим под вывод меню WordPress. На мой взгляд, это один из самых простых и универсальных Html кодов меню. Выглядит он вот так:
Главная
О нас
Наши услуги
Наша услуга №1
Наша услуга №2
Наша услуга №3
Наша услуга №4
Услуга 5
Новости
Контакты
Как видно с кода, наше выпадающее меню будет реализовано на списках ul и li. Вот так выглядит это меню без стилей CSS:
Скажем прямо выглядит уродливо, как обычный список. Далее нам нужно разукрасить это меню с помощью стилей CSS.
Горизонтальное выпадающее меню на CSS
Стили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса:hover.
Для горизонтального выпадающего меню нам потребуются вот такие стили:
#menu1{
position:relative;
display:block;
width:100%;
height:auto;
z-index:10;
}
#menu1 ul{
position:relative;
display:block;
margin:0px;
padding:0px;
width:100%;
height:auto;
list-style:none;
background:#F3A601;
}
#menu1 > ul::after{
display:block;
width:100%;
height:0px;
clear:both;
content:" ";
}
#menu1 ul li{
position:relative;
display:block;
float:left;
width:auto;
height:auto;
}
#menu1 ul li a{
display:block;
padding:9px 25px 0px 25px;
font-size:14px;
font-family:Arial, sans-serif;
color:#ffffef;
line-height:1.3em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
height:36px;
box-sizing:border-box;
}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{
background:#EBBD5B;
color:#2B45E0;
}
Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:
#menu1 ul li ul{
position:absolute;
top:36px;
left:0px;
display:none;
width:200px;
background:#EBBD5B;
}
#menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/
#menu1 ul li ul li{
float:none;
width:100%;
}
#menu1 ul li ul li a{
display:block;
text-transform:none;
height:auto;
padding:7px 25px;
width:100%;
box-sizing:border-box;
border-top:1px solid #ffffff;
}
#menu1 ul li ul li:first-child a{border-top:0px;}
#menu1 ul li ul li a:hover{
background:#FDDC96;
color:#6572BC;
}
Вот теперь все. Сам механизм выпадашки реализован одной строчкой.
Смотрите скин с этим меню:
Рис. 2 (горизонтальное выпадающее меню)
Ниже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно
нажимать открыть в новом окне 🙂 или колесико мышки)
Горизонтальное выпадающее меню на всю ширину
Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.
Надеюсь вы скачали пример выше. Html у нас остается прежним, а вот CSS мы поменяем полностью. Вы можете просто взять от сюда код CSS и вставить в скачанный пример, или же посмотреть в режиме демо как он работает.
#conteiner{
width:1000px;
height:auto;
margin:0px auto;
padding-top:10px;
}
#menu1{
position:relative;
display:block;
width:100%;
height:auto;
z-index:10;
}
#menu1 ul{
position:relative;
display:block;
margin:0px;
padding:0px;
width:100%;
height:auto;
list-style:none;
background:#F3A601;
}
#menu1 > ul{
text-align:justify;
font-size:1px;
line-height:1px;
}
#menu1 > ul::after{
display:inline-block;
width:100%;
height:0px;
content:" ";
}
#menu1 ul li{
position:relative;
display:inline-block;
width:auto;
height:auto;
vertical-align:top;
text-align:left;
}
#menu1 ul li a{
display:block;
padding:9px 35px 0px 35px;
font-size:14px;
font-family:Arial, sans-serif;
color:#ffffef;
line-height:1.3em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
height:36px;
box-sizing:border-box;
}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{
background:#EBBD5B;
color:#2B45E0;
}
#menu1 ul li ul{
position:absolute;
top:36px;
left:0px;
display:none;
width:auto;
background:#EBBD5B;
white-space:nowrap;
}
#menu1 ul li:last-child ul{/*последний пункт будет прикреплен по правому краю*/
left:auto;
right:0px;
}
#menu1 ul li:hover ul{display:block;}/*эта строчка реализует механизм выпадения*/
#menu1 ul li ul li{
display:block;
width:auto;
}
#menu1 ul li ul li a{
display:block;
text-transform:none;
height:auto;
padding:7px 35px;
width:100%;
box-sizing:border-box;
border-top:1px solid #ffffff;
}
#menu1 ul li ul li:first-child a{border-top:0px;}
#menu1 ul li ul li a:hover{
background:#FDDC96;
color:#6572BC;
}
Также этот пример отличается от первого тем, что выпадающее меню, сама выпадашка, тянется в зависимости от ширины всех пунктов меню.
Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство "white-space:nowrap;" у селектора #menu1 ul li ul, и удалить его.
Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:
Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.
Горизонтальное выпадающее меню с разделителями
Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют::before или::after , или куда проще border-left, border-right я дублировать не буду.
Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.
Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:
Сразу после .
Как вы поняли, нужно создать файл script-menu-3.js
и туда закинуть вот такой маленький код:
$(document).ready(function(){
$("#menu1 > ul > li:not(:last-child)").after(" ");
});
Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:
#menu1 ul li.razd{
height:28px;
width:1px;
background:#ffffff;
margin-top:4px;
}
Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:
Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:
Преимуществами такого решения является:
меню будет тянутся динамически;
отступы от разделителя до пункта везде одинаковые;
Раз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:
с випадашкой при наведении в сторону
со всплывающей выпадашкой третьего уровня
В своих примерах я буду показывать многоуровневое меню CSS на 3 уровня, далее думаю будет не сложно догадаться что нужно делать.
Многоуровневое выпадающее меню с випадашкой в сторону при наведении
Для начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:
Главная
О нас
Наши услуги
Наша услуга №1
Дополнение к услуге 1
Дополнение к услуге 2
Наша услуга №2
Дополнение к услуге 3
Дополнение к услуге 4
Наша услуга №3
Наша услуга №4
Услуга 5
Новости
Контакты
Карта проезда
Дополнение для карты
Дополнение для карты 2
Форма обратной связи
#conteiner{
width:1000px;
height:auto;
margin:0px auto;
padding-top:10px;
}
#menu1{
position:relative;
display:block;
width:100%;
height:auto;
z-index:10;
}
#menu1 ul{
position:relative;
display:block;
margin:0px;
padding:0px;
width:100%;
height:auto;
list-style:none;
background:#F3A601;
}
#menu1 > ul{
text-align:justify;
font-size:1px;
line-height:1px;
}
#menu1 > ul::after{
display:inline-block;
width:100%;
height:0px;
content:" ";
}
#menu1 ul li{
position:relative;
display:inline-block;
width:auto;
height:auto;
vertical-align:top;
text-align:left;
}
#menu1 ul li.razd{
height:28px;
width:1px;
background:#ffffff;
margin-top:4px;
}
#menu1 ul li a{
display:block;
padding:9px 45px 0px 45px;
font-size:14px;
font-family:Arial, sans-serif;
color:#ffffef;
line-height:1.3em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
height:36px;
box-sizing:border-box;
}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{
background:#EBBD5B;
color:#2B45E0;
}
#menu1 ul li ul{
position:absolute;
top:36px;
left:0px;
display:none;
width:auto;
background:#EBBD5B;
white-space:nowrap;
}
#menu1 > ul > li:last-child > ul{/*последний пункт будет прикреплен по правому краю*/
left:auto;
right:0px;
}
#menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/
#menu1 ul li ul li{
display:block;
width:auto;
}
#menu1 ul li ul li a{
display:block;
text-transform:none;
height:auto;
padding:7px 45px;
width:100%;
box-sizing:border-box;
border-top:1px solid #ffffff;
}
#menu1 ul li ul li:first-child > a{border-top:0px;}
#menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{
background:#FDDC96;
color:#6572BC;
}
#menu1 ul li ul li ul{
top:0px;
left:100%;
display:none;
background:#fddc96;
}
#menu1 > ul > li:last-child > ul ul{left:auto; right:100%;}
#menu1 ul li ul li ul a{color:#F38A01;}
Файлы для jQuery копируем как были с предыдущего примера. Решил оставить разделители, что б меню хоть немного лучше смотрелось. Можно конечно и без них.
Вот так получилось: Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.
Ниже вы можете посмотреть демо а также скачать пример:
Многоуровневое выпадающее меню со всплывающей випадашкой при наведении
Немного масло масляное получилось в заголовке, но прокатит, главное код.
Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.
Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.
Будет меняться только CSS полностью:
#conteiner{
width:1000px;
height:auto;
margin:0px auto;
padding-top:10px;
}
#menu1{
position:relative;
display:block;
width:100%;
height:auto;
z-index:10;
}
#menu1 ul{
position:relative;
display:block;
margin:0px;
padding:0px;
width:100%;
height:auto;
list-style:none;
background:#F3A601;
}
#menu1 > ul{
text-align:justify;
font-size:1px;
line-height:1px;
}
#menu1 > ul::after{
display:inline-block;
width:100%;
height:0px;
content:" ";
}
#menu1 ul li{
position:relative;
display:inline-block;
width:auto;
height:auto;
vertical-align:top;
text-align:left;
}
#menu1 > ul > li{position:static;}
#menu1 ul li.razd{
height:28px;
width:1px;
background:#ffffff;
margin-top:4px;
}
#menu1 ul li a{
display:block;
padding:9px 45px 0px 45px;
font-size:14px;
font-family:Arial, sans-serif;
color:#ffffef;
line-height:1.3em;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
height:36px;
box-sizing:border-box;
}
#menu1 ul li > a:hover, #menu1 ul li:hover > a{
background:#EBBD5B;
color:#2B45E0;
}
#menu1 ul li ul{
position:absolute;
top:36px;
left:0px;
display:none;
width:100%;
background:#EBBD5B;
}
#menu1 > ul > li > ul::after{
clear:both;
float:none;
width:100%;
height:0px;
content:" ";
}
#menu1 ul li:hover > ul{display:block;}/*эта строчка реализует механизм выпадения*/
#menu1 ul li ul li{
display:block;
width:30%;
float:left;
}
#menu1 ul li ul li a{
display:block;
text-transform:none;
height:auto;
padding:7px 45px;
width:100%;
box-sizing:border-box;
}
#menu1 ul li ul li:first-child > a{border-top:0px;}
#menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a{
background:#FDDC96;
color:#6572BC;
}
#menu1 ul li ul li ul{
top:0px;
left:100%;
display:none;
background:#fddc96;
z-index:15;
}
#menu1 ul li ul li ul li{display:block; float:none; width:100%;}
#menu1 ul li ul li ul a{
color:#F38A01;
border-top:1px solid #ffffff;
}
Вот так меню будет смотреться:Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через:nth-child но я не стал городить огород.
Как вы могли заметить: нижняя плашка тоже на всю ширину. Вот так делаются выпадашки в несколько блоков.
На этом у меня все, надеюсь хоть один мой пример вам подошел. Спасибо за внимание.
это принесет пользу и им и мне 🙂 .
Если вы прочли пост полностью, но не нашли как сделать свое горизонтальное выпадающее меню на css, задайте вопрос в комментариях или воспользуйтесь поиском по сайту.
Также, советую посетить родительскую страницу https://сайт/vypadayushhee-menu/
, там собраны все примеры и разновидности выпадающих меню.
Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта
. В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню
, которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!
Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:
Главная
Статьи
HTML
CSS
PHP
MySQL
Книги
Раскрутка и продвижение
Е-Бизнес
Web-Дизайн
Платежные системы
О нас
Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .
На следующем этапе мы приведем наше меню к более красивому виду. Это легко можно сделать благодаря использованию CSS .
Первым делом уберем меркеры в ненумерованном списке, отступы, а также зададим ширину нашего меню.
#nav ul {
margin: 0px;
padding: 0px;
list-style:none;
width:200px;
}
Теперь нам необходимо задать положение элементов списка. Так как наше меню
будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position"
, как "relative"
. Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю. Также зададим нижнее подчеркивание для пунктов меню.
#nav ul li {
position: relative;
border-bottom:1px solid #ccc;
}
Теперь необходимо подкорректировать наше подменю
. Так как мы хотим, чтобы наше меню появлялась справа от основного меню в тот момент, когда над этим пунктом находится курсор, то нам необходимо вложенному списку, свойству "position"
задать значение "absolute"
. Также нам необходимо задать его положение. Это делается следующим образом
#nav li ul {
position: absolute;
left: 200px;
top: 0;
display: none;
}
Используя атрибуты left
и top
мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display"
значение "none"
, так как мы не хотим видеть подменю при открытии страницы.
Итак, теперь наше меню выглядит так.
Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display"
значение "block"
. Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.
#nav ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
}
#nav li:hover ul { display: block; }
Вот теперь наше меню уже работает и выглядит так .
Осталось придать ему более привлекательный вид.
Для начала давайте сделаем так, чтобы при наведении на пункты нашего меню изменялся фон и цвет текста. Для этого добавим следующий код
#nav li:hover a {
color:#FFFFFF;
background: url(img/fone-tr.png);
}
Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff;
).
#nav li:hover ul a:hover {
background-color:#cccccc;
background-image:none;
color:#FFFFFF;
}
Ну вот и все! Наше выпадающее меню на html и CSS
готово. Можете посмотреть, что у нас получилось .
На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover
лишь для тега - так что li:hover
, на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.
Для того чтобы устранить эту проблему, добавим небольшой JavaScript-код:
А теперь сделаем так, чтобы при наведении на пункт подменю, он также изменял цвет своего фона. Для этого используем следующий код:
jsHover = function() {
var hEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0, len=hEls.length; i
Live Journal
Facebook
Twitter
Рис. 2 (горизонтальное выпадающее меню)
Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.