Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться делать с Вами классное, цветное и выпадающее меню на чистом CSS3. Огромный плюс данного меню в том, что тут не используются скрипты, только CSS.
Так же мы сделаем его в нескольких цветах, которые пользователь может выбрать сам. Честно скажу Вам, что смотрится очень клёво и практично.
Ну а теперь давайте будем делать это наше .
Выпадающее и цветное меню для сайта на чистом CSS3
ι
HTML
Для начала давайте сделаем сам код HTML, и посмотрим как он будет выглядеть. Тут как обычно ничего сложного нет. Мы здесь выведем сам перечень цветов которые находятся над меню, и которые сможет выбирать пользователь. А также выведем код самого . Вот как этот весь код будет выглядеть:
Главная
Меню 1
Подменю 1
Подменю 2
Подменю 3
Подменю 4
Подменю 5
Меню 2
Подменю 2-1
Подменю 2-2
Подменю 2-3
Подменю 2-4
Подменю 2-5
Подменю 2-6
Подменю 2-7
Подменю 2-8
Меню 3
Подменю 3-1
Подменю 3-2
Подменю 3-3
Подменю 3-4
Подменю 3-5
Меню 4
Меню 5
Меню 6
CSS
Теперь, непосредственно давайте задавать сам стиль CSS для меню и для цвета. Вот он сам CSS код:
Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на 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/
, там собраны все примеры и разновидности выпадающих меню.
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
Выпадающее меню
ul.menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
Главная
Контакты
Услуги
У нас получился список такого вида:
Рисунок 1. Подготовительные работы.
Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover
. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки - это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта "Услуги", добавим выпадающие разделы: "Купить", "Продать", "Обменять". Эти пункты - это отдельный список, который вложен в тег
Создадим этот список и добавим стили, описывающие его внешний вид.
Выпадающее меню
ul.menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
Главная
Контакты
Услуги
Купить
Продать
Обменять
Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.
Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display
: none
}. А при наведении курсора его нужно активировать сделав снова видимым правила {display
: inline-block
}.
Выпадающее меню
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
display: none; /* делаем невидимым */
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
/* делаем видимым при наведении курсора на блок li */
.menu > li:hover > .menuInner{
display: block;
}
Главная
Контакты
Услуги
Купить
Продать
Обменять
Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute
.
правило позиционирования {position
: relative
;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
Добавили в родительский элемент
правило {height
: 20px
;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
Установили абсолютное позиционирование {position
: absolute
;} выпадающему списку и установили координаты: top
и left
.
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс:hover. Работающее меню можно (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы HTML5 и CSS3».
Создание простого выпадающего меню
Для создания меню
на сайте обычно используется структурный блочный HTML-элемент nav
и ненумерованный список
. В одном из пунктов списка встраивается еще один список, так, чтобы он не входил в гиперссылку. Можно было бы разместить ul и внутри a, но на мой взгляд это не очень хорошая идея, ведь псевдо-класс:hover работает и с элементами li!
В нашем случае мы не рассматриваем вариант, когда у выпадающего списка
тоже есть вложенные списки — эта задача не сложна сама по себе, но вызовет трудности у начинающего верстальщика. Также заметим, что построение меню можно выполнить, если найти или написать соответствующий JavaScript.
Для удобства работы с разметкой (вдруг у нас встретится ещё один nav), добавим CSS-класс нашему структурному навигационному элементу; гиперссылки сделаем заглушками, но вы можете вместо # прописать http://сайт 🙂
HTML-разметка для меню с выпадающим подменю
Lorem.
Explicabo?
Lorem.2
Eveniet.2
Omnis.2
Beatae.2
Doloribus.
Sint.
Главное в CSS: чистка значений по умолчанию у HTML-элементов, входящих в меню; сокрытие будущего выпадающего подсписка (подменю
) и его отображение, при наведении на родительский HTML-элемент — использование псевдо-класса:hover
CSS-правила для выпадающего меню.menu ul li{
padding: 10px;
}
.menu ul > li:hover{
background-color: #f96;
}
.menu ul ul > li:hover{
background-color: #69e;
}
.menu ul li, .menu ul{
display: inline-block;
}
.menu ul{
position: relative;
margin: 0;
padding: 0;
background-color: #f63;
}
.menu ul ul{
display: none;
position: absolute;
background-color: #369;
margin-top: 10px;
margin-left: -10px;
}
.menu ul a{
color: #fff;
text-decoration: none;
}
.menu ul ul a{
color: #fff;
text-decoration: none;
}
.menu li:hover ul{
display: block;
}
.menu li:hover li{
display: block;
}
Созданное меню не является идеальным и может быть улучшено (подумайте, как именно). Удачной вам разработки и пусть создание подобных меню никогда не вызовет сложности!
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS
». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню
. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на .
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Рис. 2 (горизонтальное выпадающее меню)
Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.
Рисунок 2. Подготовительные работы.
Рисунок 3. Окончательный вариант.
