Горизонтальное многоуровневое выпадающее меню для сайта на CSS

Красивое горизонтальное многоуровневое выпадающее меню для сайта на CSS

Горизонтальное многоуровневое выпадающее меню для сайта на CSS
1 год назад

Горизонтальное многоуровневое выпадающее меню для сайта на CSS

Многоуровневое меню с выпадающими списками становятся все более популярными среди вебмастеров и начинающих пользователей. С помощью таких меню можно существенно повысить скорость передвижения по вашему сайту, за счет прямых ссылок на каждую из страниц. Попросту говоря пользователь может сразу переместиться в любой подраздел сайта. Речь идет о горизонтальном выпадающем меню для сайта, которое автоматически растягивается по ширине экрана или блока, равномерно распределяя расстояния между всеми пунктами меню. Работа этого меню никак не повлияет на загрузку вашего сайта, само меню очень мало весит, а код написан на CSS + HTML.

Структура меню строится на основе упорядоченного списка с подпунктами каждого основного раздела.
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html{
 height: 100%;
}

body{
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 color:#474d59;
 background: url('main-bg.png') repeat;
}

#menu-wrap {
 width: 950px;
 display: table;
 margin: 100px auto;
 background: #53BF6B;
}

#menu {  
 list-style: none;
 padding: 0;
 margin: 0; 
 font-family: inherit;
 font-size: 14px;
 z-index: 4;
 position: relative;
 display: table-row;

}
#menu li{
 position:relative; 
 display: table-cell;
 float: none;
 margin: 0;
 text-align: center; 
 border-right: 1px solid #80DF95;
}

#menu li:last-child {
 border: 0 none; 
}

#menu li a {
 display: block;
 color: #fdfdfd;
 text-decoration: none;
 padding: 12px 20px 12px 20px; 
}

#menu li:hover { 
 background: #528F60;
}


#menu li ul li {        
 float:none;       
 width:250px;   
 display: block;
 background: #000;
 margin: 0;
 padding: 0;
 text-align: left;
 border: 0 none;
}


#menu li ul li a {
 color: #f7f7f7;
 padding: 10px;
 border-bottom: 1px solid #333;
}

#menu li ul li:hover { 
 background:#000;
 text-decoration: underline;
 color: #f7f7f7;
}

#menu li ul li ul li:hover { 
 background:#000;
 text-decoration: underline; 
}

#menu li ul li ul {        
 margin-left: 2px;
}

#menu li ul{
 display:none;
 position:absolute;
 background-color:#4d2001;
 list-style:none;
 padding:0;
 z-index: 5;
}
#menu li:hover ul{   
 display:block; 
}

#menu li ul li ul,      
#menu  li:hover ul li ul{    
 display:none;
 position:absolute;
 left:250px;
 top:0;
}

#menu li ul li:hover ul{
 display:block;
}

#menu li:hover a {
 color: #f7f7f7;
}

#menu li:hover > ul li a {
 color: #f7f7f7;
}

#menu li > a:after { 
 color: #f7f7f7;
 content: ' ▾';
 font-size: 16px;
} 

#menu li > a:only-child:after {
 content: '';
}   

#menu li ul li > a:after {
 color: #f7f7f7;
 content: '';
} 

#menu li:hover > a:after {
 content: ' ▾';
 color: #000;
 font-size: 16px;
}
 
#menu li:hover > a:only-child:after {
 content: '';
}   

#menu li ul li:hover > a:after {
 content: '';
} 

#menu ul ul li:first-child > a:after {
 position: absolute;
 left: -6px;
 top: 50%;
 margin-top: -6px;
 border-left: 0; 
 border-bottom: 6px solid transparent;
 border-top: 6px solid transparent;
 border-right: 6px solid #fff;
} 
menu.htm
<div id="menu-wrap">
<ul id="menu">
 <li><a href="">Стулья</a>
  <ul>
  <li><a href="">Металлические</a></li>
  <li><a href="">Хромированные</a></li>
  <li><a href="">Деревянные</a></li>
  <li><a href="">Барные</a></li>
  <li><a href="">Компьютерные кресла</a>
   <ul>
   <li><a href="">Металлические</a></li>
   <li><a href="">Хромированные</a></li>
   <li><a href="">Деревянные</a></li>
   </ul>
  </li>
  <li><a href="">Кухонные уголки</a></li>
  </ul>
 </li>
 <li><a href="">Табуреты и обувницы</a>
 <ul>
 <li><a href="">Табуреты</a></li>
 <li><a href="">Банкетки и пуфики </a></li>
 <li><a href="">Обувницы</a></li>
 </ul>
 </li>
 <li><a href="">Столы</a>
 <ul>
 <li><a href="">Деревянные</a></li>
 <li><a href="">Стеклянные</a></li>
 <li><a href="">С каменной столешницей</a></li>
 <li><a href="">С плиткой</a></li>
 <li><a href="">Ламинированные</a></li>
 <li><a href="">С фотопечатью</a>
 <ul>
   <li><a href="">Табуреты</a></li>
   <li><a href="">Банкетки и пуфики </a></li>
   <li><a href="">Обувницы</a></li>
  </ul>
  </li>
  <li><a href="">Трансформеры</a></li>
  <li><a href="">Письменные</a></li>
  <li><a href="">Журнальные</a></li>
  <li><a href="">Сервировочные</a></li>
  <li><a href="">Компьютерные столы</a></li>
 </ul>
 </li>
 <li><a href="">Мебель для гостиной</a>
 <ul>
 <li><a href="">Комоды</a></li>
 <li><a href="">Вешалки</a></li>
 <li><a href="">Светильники</a></li>
 <li><a href="">Стеллажи</a></li>
 <li><a href="">ТВ тумбы</a></li>
 </ul>
 </li>
 <li><a href="">Садовая мебель</a>
 <ul>
 <li><a href="">Скамейки</a></li>
 <li><a href="">Столы</a></li>
 <li><a href="">Мангалы</a></li>
 <li><a href="">Урны</a></li>
 </ul>
 </li>
 <li><a href="">Распродажа</a></li>
</ul>
</div>
1,3K
Демо Скачать
Комментарии