Подписка
Получать новости и персональные скидки от Guide-Group. на почту:Горизонтальное выпадающее меню CSS
Сегодня мы научимся делать горизонтальное выпадающее меню CSS без применения дополнительных скриптов, то есть выпадающее меню на чистом HTML / CSS. Для чего это нужно и как его сделать — рассмотрим прямо сейчас!
Для чего нужно горизонтального выпадающего меню?
Многие делают сайты таким образом, что поиск нужной информации становится трудным и не логичным. Чаще всего для получения интересующего контента необходимо совершить от 5 до 10 кликов, а в некоторых случаях и того больше. Структурированное горизонтальное выпадающее меню на CSS дает возможность значительно уменьшить количество кликов и, как следствие, количество отказов при посещении веб-сайта. Ведь в удобном меню всегда клики сведены к минимуму и вся информация получается как на ладони, таким образом на получение информации у посетителя может быть затрачено до 1-2 кликов!
В чем преимущество горизонтальное выпадающее меню?
— Отсутствие лишнего кода;
— Отсутствие сложных скриптов;
— Уменьшение количества кликов и уровня отказов;
Насколько легко можно сделать выпадающее меню на чистом CSS?
Это намного легче, чем Вы можете себе представить. Главное понимать логику CSS стилей и никаких сложностей у вас не возникнет. Для того, чтобы сделать горизонтальное выпадающее меню css Вам необходимо:
1. Создать основной код горизонтального меню.
<div class="menu">
<a href="/">Главная</a>
<div id="products" class="dropdownmenu">
<a href="#">Продукция</a>
<div>
<div class="dropsubmenu">
<div class="dropsubmenulist">
<a href="#">Корм для кошек</a>
<a href="#">Корм для собак</a>
</div>
<a href="#">Best Dinner</a>
</div>
<div class="dropsubmenu">
<div class="dropsubmenulist">
<a href="#">Сухие корма</a>
<a href="#">Влажные корма</a>
</div>
<a href="#">Счастливый пес</a>
</div>
<div class="dropsubmenu">
<div class="dropsubmenulist">
<a href="#">Для кошек</a>
<a href="#">Для собак</a>
</div>
<a href="#">Holistic Blend</a>
</div><a href="#">Наполнители Dr. Elsey's</a>
</div>
</div>
<a href="#">Новости</a>
<a href="#">Контакты</a>
</div>2. Подготовить CSS стили, где при наведении элемент — высвечивается другой с абсолютным позиционированием.
.menu {
display: block;
background: #576472;
position: relative;
/* Дополнительные стили оформления меню */
text-transform: uppercase;
border-top-left-radius: 2px;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-right-radius: 2px;
-moz-border-top-right-radius: 2px;
-webkit-border-top-right-radius: 2px;
}
.menu a {
display: inline-block;
padding: 1.5em;
color: #fff;
text-shadow: 0px 1px 3px rgba(0,0,0,0.2);
text-decoration: none;
transition: 0.33s;
text-transform: uppercase;
}
.menu a:hover {
text-shadow: 0px 1px 3px rgba(0,0,0,0.2);
color: #fff;
background: rgba(0,0,0,0.2);
transition: 0.33s;
}
.dropdownmenu {
display: inline-block;
color: #fff;
text-shadow: 0px 1px 3px rgba(0,0,0,0.2);
text-decoration: none;
transition: 0.33s;
text-transform: uppercase;
}
.dropdownmenu:hover {
text-shadow: 0px 1px 3px rgba(0,0,0,0.2);
color: #fff;
background: rgba(0,0,0,0.2);
}
.dropdownmenu:hover > div {
display: block;
margin-top: 0;
transition: 0.33s;
}
.dropdownmenu > div {
display: none;
position: absolute;
background: #384049;
width: 250px;
margin-top: -4.2em;
z-index: 999999;
transition: 0.33s;
margin-top: -250px;
}
.dropdownmenu div > a {
display: block;
transition: 0.33s;
font-size: 14px;
}
.dropdownmenu div > a:hover {
background: #323a42;
}
.dropsubmenu:hover > div.dropsubmenulist {
display: block;
}
.dropsubmenulist {
display: none;
position: absolute;
margin-left: 250px;
background: #384049;
width: 250px;
border-left: #576472 5px solid;
}Вот и все, создание многоуровнего выпадающего меню на CSS оказалось совсем не сложным. Логика тут тоже проста, при наведении на элемент мы выводим другой, который вложен в него за счет стилей. Благодаря готовому коду Вам остается лишь заменить стили на свои.