Горизонтальное выпадающее меню 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;
}

3. Установите в свой шаблон сайта.  

Вот и все, создание многоуровнего выпадающего меню на CSS оказалось совсем не сложным. Логика тут тоже проста, при наведении на элемент мы выводим другой, который вложен в него за счет стилей. Благодаря готовому коду Вам остается лишь заменить стили на свои.

Комментарии