Lecaw

Учимся создавать Web-сайты

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

August 20, 2012
CSS
1951hits

При помощи некоторых усовершенствованных селекторов, выпадающее горизонтальное меню можно легко создать только лишь на CSS. Добавьте несколько необычных свойств CSS3 и можете разработать такой проект, который создается только при помощи фоновых изображений и Javascript. Просмотрите это руководство, чтобы увидеть пошаговый процесс создания собственного выпадающего меню на чистом CSS.

 ДЕМО

 

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

HTML структура

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>

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

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>

Первый набор ссылок подменю будет добавлен в разделах “Tutorials” и “Articles”, каждый из которых полный неупорядоченный список, вставляется в родительский пункт li.

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>

Вторичное подменю располагается под названием "Web Design" первого подменю. Эти ссылки помещены в другой неупорядоченный список и вставлены в тег li "Web Design".

CSS

nav ul ul {
	display: none;
}
	nav ul li:hover > ul {
		display: block;
	}

Давайте перейдем к CSS, настроим основную работу выпадающего меню. С помощью CSS специфики и передовых селекторов мы можем указать отдельные элементы расположенные глубоко в структуре HTML без необходимости в дополнительных идентификаторов или классов. Вначале скрываем подменю, перенаправляя любой UL в UL с display:block. Для того чтобы отображались эти меню, они должны быть преобразованы обратно, чтобы заблокировать элементы при наведении курсора мыши на LI.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

Далее, стиль главного меню навигации с помощью CSS3 свойств, таких как gradients, box shadows и border radius. Добавление position:relative позволит нам  спозиционировать подменю в соответствии с главной панелью, а затем display:inline-table будет определять ширину, чтобы соответствовать с размерами меню.

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

Стиль для отдельных пунктов меню добавлены в <li> с вложенным якорем. В браузере, это будет выглядеть как измененная ссылка на синем фоновом градиенте и белым текстом.

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

Стиль для основной панели у нас готов, но подменю все еще нуждается в доработке. В настоящее время оно наследуют стили от родительских элементов, поэтому изменение фона, border-radius и отступов фиксирует их появление. Чтобы убедиться, что они выдвигаются из главного меню, мы расположим их абсолютно от верхнего UL (т. е. вниз).

LI каждого UL в подменю не будет плавающим рядом, вместо этого они перечисляются вертикально с тонкими разделительными границами у каждого элемента. Вспомогательный эффект при наведении – темный фон, выступает в качестве индикатора.

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

Последний шаг заключается в позиционировании вторичного подменю. Эти меню унаследует стиль от своего родителя, так что все позиционируем с правой стороны относительно положения родителей <li>.

 ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(7 голосов)

Оставить комментарий