Продолжаем серию уроком посвященных выпадающим меню. На очереди горизонтальное выпадающее меню на css своими руками.
Если вы попали сюда случайно или вы искали другую реализацию выпадающего меню советую перейти в родительский раздел .
В этом разделе будет описанное горизонтальное выпадающее меню на CSS и HTML.
в коде.
Выпадающее горизонтальное меню 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+HTML
Раз пошла речь о многоуровневых выпадающих меню при наведении, наверное стоить поделить их на подгруппы:
с випадашкой при наведении в сторону
со всплывающей выпадашкой третьего уровня
В своих примерах я буду показывать многоуровневое меню 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/
, там собраны все примеры и разновидности выпадающих меню.
Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться делать с Вами классное, цветное и выпадающее меню на чистом 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 код:
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
display: table;
padding: 10px;
position: relative;
}
#nav ul {
background-color: red;
border:1px solid red;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
padding: 20px 0 10px;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
font-size: 16px;
padding: 7px 20px;
text-decoration: none;
}
#nav li:hover > a {
background-color: red;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
}
#nav li:hover > a.hsubs {
border-radius: 5px 5px 0 0;
}
#nav li:hover ul.subs {
left: 0;
top: 34px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
}
#nav ul li {
width: 100%;
}
#nav ul li:hover > a {
background-color: #222222 !important;
border-radius: 5px 5px 5px 5px;
}
/* colors */
.colorScheme {
height: 32px;
list-style: none outside none;
margin: 0 auto 25px;
width: 320px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px;
width: 30px;
}
.colorScheme .red {
background-color: red;
}
.colorScheme .orange {
background-color: orange;
}
.colorScheme .pink {
background-color: pink;
}
.colorScheme .green {
background-color: green;
}
.colorScheme .blue {
background-color: blue;
}
.colorScheme .indigo {
background-color: indigo;
}
.colorScheme .violet {
background-color: violet;
}
.colorScheme .grey {
background-color: grey;
}
#red:target ~ #nav ul {
background-color: red;
border: 1px solid red;
}
#orange:target ~ #nav ul {
background-color: orange;
border: 1px solid orange;
}
#pink:target ~ #nav ul {
background-color: pink;
border: 1px solid pink;
}
#green:target ~ #nav ul {
background-color: green;
border: 1px solid green;
}
#blue:target ~ #nav ul {
background-color: blue;
border: 1px solid blue;
}
#indigo:target ~ #nav ul {
background-color: indigo;
border: 1px solid indigo;
}
#violet:target ~ #nav ul {
background-color: violet;
border: 1px solid violet;
}
#grey:target ~ #nav ul {
background-color: grey;
border: 1px solid grey;
}
#red:target ~ #nav li:hover > a {
background-color: red;
}
#orange:target ~ #nav li:hover > a {
background-color: orange;
}
#pink:target ~ #nav li:hover > a {
background-color: pink;
}
#green:target ~ #nav li:hover > a {
background-color: green;
}
#blue:target ~ #nav li:hover > a {
background-color: blue;
}
#indigo:target ~ #nav li:hover > a {
background-color: indigo;
}
#violet:target ~ #nav li:hover > a {
background-color: violet;
}
#grey:target ~ #nav li:hover > a {
background-color: grey;
}
Задача
Создать выпадающее меню инструментами 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
.
Выпадающее меню
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
position: relative; /* добавляем позиционирование */
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
height: 20px; /* добавляем высоту */
}
/* устанавливаем стиль ссылок в меню */
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;
}
.menu > li:hover > .menuInner{
display: block;
position: absolute;
top: 30px;
left: 0;
}
Что мы тут сделали:
правило позиционирования {position
: relative
;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
Добавили в родительский элемент
правило {height
: 20px
;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
Установили абсолютное позиционирование {position
: absolute
;} выпадающему списку и установили координаты: top
и left
.
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.
Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Хабр, привет!
На С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 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.
Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.
Перед тем, как мы начнем это руководство, вам понадобится следующее:
- Доступ к контрольной панели вашего хостинга
Шаг 1 - Создание HTML-файла
Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html
. Для этого мы будем использовать Файловый менеджер
. Однако тот же результат может быть достигнут с использованием (создайте файл menu.html
на вашем компьютере и загрузите его на ваш хостинг).
Шаг 2 - Добавление кода HTML меню
Наше меню будет сделано из одного родительского элемента под названием Главное меню
и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс – dropdown
, mainmenubtn
и dropdown-child
. Классы необходимы для применения правил CSS.
Главное меню
Подраздел 1
Подраздел 2
Подраздел 3
Подраздел 4
Подраздел 5
Вот, как это выглядит без применения каких-либо CSS-правил:
Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.
Шаг 3 - Как создать выпадающее меню CSS
Мы стилизуем наш HTML код используя следующие CSS правила:
Mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Как вы видите, класс .dropdown-child
имеет CSS правило display: none
. Однако, как только пользователь проведет курсором (.dropdown:hover
) по родительскому элементу, это правило изменит его отображение на display: block
. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html
:
.mainmenubtn {
background-color: red
;
color: white
;
border: none;
cursor: pointer;
padding:20px
;
margin-top:20px
;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black
;
min-width: 200px
;
}
.dropdown-child a {
color: white
;
padding: 20px
;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Главное меню
Подраздел 1
Подраздел 2
Подраздел 3
Подраздел 4
Подраздел 5
В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для .
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Заключение
Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.
Facebook
Вконтакте
Google+
Инструкции
Вам также может понравиться
