Создаём можное выпадающее меню на CSS

css меню

От автора: Обширные меню часто используются на сайтах электронной коммерции или просто на обширных порталах. «Мега» меню становятся все более и более популярны, потому что являются эффективным решением для отображения большого количества информации, не нарушая при этом разметку страницы. В этом уроке мы увидим, как построить удивительное, кроссбраузерное, выпадающее меню, используя только CSS, и придадим ему «товарный вид» с помощью CSS3.

Перед тем, как мы приступим к созданию выпадающего меню на CSS, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер! Итак, начнем создавать выпадающее меню на css.

css меню

Шаг 1: Строим строку навигации

Давайте начнем с основного меню. Сделаем его при помощи ненумерованного списка и добавим немного CSS.

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Создаем контейнер для меню

Теперь применим CSS. Контейнер для меню будет фиксированной ширины и отцентрирован, задав значения left:auto и right:auto свойству margin

#menu {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;
}

Сейчас посмотрим, как мы можем его улучшить, используя CSS 3. Мы должны использовать разный синтаксис для Webkit браузеров (таких как Safari) и для Mozilla браузеров (таких как Firefox).
Для закругления углов синтаксис будет такой:

-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;

Чтобы сохранить согласованность при выборе цвета, можно воспользоваться сервисом Facade, он поможет выбрать более светлый или более темный цвет, чем цвет основного фона.

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

В первый строке устанавливается обычный фоновый цвет для старых браузеров. Во второй и третьей строке используется градиент от верха страницы к низу используя переход цвета от #0272a7 к #013953.

Сейчас мы можем добавить более темную и изысканную границу, применив рамку и тень к нашему блоку меню. Синтаксис одинаковый для всех браузеров: первое значение – горизонтальное смещение; вторая – вертикальное смещение; третья – радиус размытия (маленькое значение делает его проще, в нашем примере он будет 1рх). Мы установили все смещения в 0, таким образом, значение размытия будет равномерным по всей границе.

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;

Вот полный CSS код контейнера #menu.

#menu {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */

	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

	/* Borders */

	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

Добавляем стили к пунктам меню

Начнем со всех пунктов меню, выровненных по левому краю и с отступом между ними margin-right (padding будет необходим для наведенного состояния пункта меню):

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

Для наведенного состояния и для выпадающих подпунктов я выбрал серый цвет.

Основной цвет будет светло-серый (#F4F4F4) и применим градиент сверху вниз от (#F4F4F4) до (#EEEEEE). Закругленные углы мы применим только сверху, так как выпадающий подпункт будет сразу под пунктом меню.

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

Правый и левый padding будет немного меньше, потому в наведенном состоянии у пункта меню есть border в 1px. Если оставим прежний padding, то меню сдвинется на два пикселя вправо, потому что в наведенном состоянии у пункта меню присутствует border. Чтобы избежать этого мы удалим правый и левый border и он будет равен 9px вместо 10px.

border: 1px solid #777777;
padding: 4px 9px 4px 9px;

Теперь добавим закругленные углы только сверху, так как выпавший подпункт меню будет находиться сразу же под основным пунктом.

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;

Вот окончательный CSS пункта меню в наведенном состоянии:

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;

	/* Background color and gradients */

	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

	/* Rounded corners */

	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

К ссылкам мы применим тень от текста, используя простой синтаксис: первое и второе значение это вертикальный и горизонтальный отступы для тени (1рх например). Третье значение – размытие (то же 1 рх). Затем назначаем черный цвет для тени.

text-shadow: 1px 1px 1px #000;

Вот окончательный CSS для ссылок:

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

Для ссылок в наведенном состоянии, для которых фоновый цвет серый, мы будем использовать темный цвет (#161616) для ссылок и белый цвет для тени.

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #FFFFFF;
}

Наконец, нам нужен индикатор того, что данный пункт меню содержит выпадающие подпункты. В качестве такого индикатора будем использовать фоновое изображение стрелки правее текста ссылки. Отпозиционируем его вправо, применим padding-right, и дадим небольшой отступ сверху. Отступ сверху в наведенном состоянии будет 7рх, а не 8рх, потому что у нас есть border в 1 рх вокруг наведенного пункта меню.

#menu li .drop {
	padding-right:21px;
	background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("img/drop.png") no-repeat right 7px;
}

Вот окончательный код для ссылок и контейнера меню. Только у пункта меню “home” нет выпадающих подпунктов.

Вот окончательный код для ссылок и контейнера меню. Только у пункта меню “home” нет выпадающих подпунктов.

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#" class="drop">About</a></li>
	<li><a href="#" class="drop">Services</a></li>
	<li><a href="#" class="drop">Portfolio</a></li>
	<li><a href="#" class="drop">Contact</a></li>
</ul>
#menu {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */

	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

	/* Borders */

	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;

	/* Background color and gradients */

	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

	/* Rounded corners */

	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
	padding-right:21px;
	background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("img/drop.png") no-repeat right 7px;
}

Результат выглядит так:

css меню

ШАГ 2: Делаем выпадающие подпункты

Классическое выпадающее меню обычно состоит из вложенных списков и выглядит примерно так:

<ul id="menu">
	<li><a href="#">Item 1</a><
		<ul>
			<li><a href="#">Subitem 1</a></li>
			<li><a href="#">Subitem 2</a></li>
			<li><a href="#">Subitem 3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 2</a><
		<ul>
			<li><a href="#">Subitem 1</a></li>
			<li><a href="#">Subitem 2</a></li>
		</ul>
	</li>
</ul>

Основная структура

Для нашего «мега» меню вместо вложенных списков мы будем использовать div – ы, что будет работать как несколько вложенных списков.

<ul id="menu">
	<li><a href="#">Item 1</a>
		<div>
		Drop down Content
		<div>
	</li>
	<li><a href="#">Item 2</a>
		<div>
		Drop down Content
		<div>
	</li>
</ul>

Это основная структура для выпадающих подпунктов. Идея основана на том, что мы можем включить некоторый контент в выпадающее подменю, такие как абзацы, картинки, другие списки, контактные формы и т.д.

Контейнеры выпадающих подпунктов

Ширина контейнеров зависит от его содержимого. Я выбираю имя тега в зависимости от числа столбцов, содержащихся в контейнере.

Чтобы скрыть выпадающий подпункт, мы будем использовать абсолютное позиционирование и отрицательный левый отступ.

position:absolute;
left:-999em;

Фоновый цвет у контейнера выпадающих подпунктов будет такой же как и у выбранного пункта меню. Современный браузеры показывают градиент от #ЕЕЕЕЕЕ (такой же как и у пункта меню) до #BBBBBB.

background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

Мы опять-таки будем использовать закругленные углы, кроме верхнего левого.

-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
	margin:4px auto;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;

	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

Проиллюстрируем это. Посмотрите, как это выглядит, если оставить закругленный левый верхний угол:

css меню

А вот так выглядит у нас:

css меню

Как вы видите подпункт аккуратно приклеен в своему основному пункту меню.

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

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

И для того, что бы показывать выпадающий контейнер по наведению мыши мы просто используем следующий код:

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
	left:-1px;top:auto;
}

Использование выпадающего контейнера

Наши классы готовы, чтобы включить их в меню. Мы используем каждый из них, начиная с пятого, и каждый около своего пункта меню:

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#" class="drop">5 Columns</a>
		<div class="dropdown_5columns">
		<p>5 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">4 Columns</a>
		<div class="dropdown_4columns">
		<p>4 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">3 Columns</a>
		<div class="dropdown_3columns">
		<p>3 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">2 Columns</a>
		<div class="dropdown_2columns">
		<p>2 Columns content</p>
		</div>
	</li>
	<li><a href="#" class="drop">1 Column</a>
		<div class="dropdown_1column">
		<p>1 Column content</p>
		</div>
	</li>
</ul>

То, что должно получиться, использовав вышеуказанный код.

css меню

ШАГ 3: Создание столбцов выпадающего контейнера

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

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

Использование столбцов

Вот пример выпадающих подпунктов, содержащих несколько столбцов. В этом примере у нас есть разные комбинации использования всех видов столбцов.

<ul id="menu">
	<li><a href="#" class="drop">5 Columns</a>
		<div class="dropdown_5columns">
			<div class="col_5">
			<p>This is a 5 Columns content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_4">
			<p>This is a 4 Columns content</p>
			</div>
			<div class="col_1">
			<p>This is a 1 Column content</p>
			</div>
			<div class="col_3">
			<p>This is a 3 Columns content</p>
			</div>
			<div class="col_2">
			<p>This is a 2 Columns content</p>
			</div>
		</div>
	</li>
</ul>

Выглядит это так:

css меню

ШАГ 4: Выравнивание вправо

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

Чтобы сделать это добавляем новый класс .menu_right в родительский список пунктов. Таким образом, мы переустановим right margin и float направо.

#menu .menu_right {
	float:right;
	margin-right:0px;
}

Далее взглянем на выпадающий контейнер. В предыдущем CSS коде мы применили для всех закругление, кроме верхнего левого. Теперь нам нужно выровнять контейнер по правому краю. Соответственно мы перепишем значение border-radius с новым классом .align_right и установим скругление правого верхнего ула в 0.

#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
	-webkit-border-radius: 5px 0px 5px 5px;
	border-radius: 5px 0px 5px 5px;
}

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

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

Теперь все готово для использования в меню.

<li class="menu_right"><a href="#" class="drop">Right</a>
	<div class="dropdown_1column align_right">
		<div class="col_1">
		<p>This is a 1 Column content</p>
		</div>
	</div>
</li>

Должно выглядеть так.

css меню

ШАГ5: Добавляем контент и стили к выпадающим пунктам

У нас есть полностью готовая структура. Теперь мы можем добавить какого угодно контента: текст, списки, изображения…

Основные стили

Давайте начнем с базовых стилей для абзацев и заголовков.

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}
.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}

Мы можем применить приятный голубой цвет для ссылок выпадающего меню.

#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}

Стили для списков

Украсим наши списки. Мы хотим переопределить такие стили как фоновый цвет или границы списков, которые используются в основном меню (навигационной панели).

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

Стили для картинок

.imgshadow {
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}

И сделаем абзацы с изображениями слева

.img_left {
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}

Текстовые блоки

Выделим некоторый контент, например темным блоком с закругленными углами и небольшой тенью.

#menu li .black_box {
	background-color:#333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

Переустанавливаем стили для списков

Наконец, воспользуемся другим путем для добавления стилей к спискам, используя опять-таки CSS 3.

#menu li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}

ШАГ 6: Совместимость браузеров и IE 6

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

Для полноценного IE используем следующий код:

<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->

Я использовал несколько PNG файлов в данной статье, а каждый знает, что IE 6 не поддерживает прозрачности. Чтобы это исправить есть множество решений.

Конвертировать их в формат GIF или PNG-8
Использовать скрипт
Назначить фоновый цвет отличный от серого, например с TweakPNG

Из этих решений вы можете выбрать то, которое больше вам подходит.

Теперь давайте посмотрим на полный пример.

Окончательный код

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />

<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->

</head>

<body>

<ul id="menu">

    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->

        <div class="dropdown_2columns"><!-- Begin 2 columns container -->

            <div class="col_2">
                <h2>Welcome !</h2>
            </div>

            <div class="col_2">
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
            </div>

            <div class="col_2">
                <h2>Cross Browser Support</h2>
            </div>

            <div class="col_1">
                <img src="img/browsers.png" width="125" height="48" alt="" />
            </div>

            <div class="col_1">
                <p>This mega menu has been tested in all major browsers.</p>
            </div>

        </div><!-- End 2 columns container -->

    </li><!-- End Home Item -->

    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->

        <div class="dropdown_5columns"><!-- Begin 5 columns container -->

            <div class="col_5">
                <h2>This is an example of a large container with 5 columns</h2>
            </div>

            <div class="col_1">
                <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
            </div>

            <div class="col_1">
                <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
            </div>

            <div class="col_1">
                <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
            </div>

            <div class="col_1">
                <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
            </div>

            <div class="col_1">
                <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
            </div>

            <div class="col_5">
                <h2>Here is some content with side images</h2>
            </div>

            <div class="col_3">

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>

                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>

            </div>

            <div class="col_2">

                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

            </div>

        </div><!-- End 5 columns container -->

    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->

        <div class="dropdown_4columns"><!-- Begin 4 columns container -->

            <div class="col_4">
                <h2>This is a heading title</h2>
            </div>

            <div class="col_1">

                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <h3>Useful Links</h3>
                <ul>
                    <li><a href="#">NetTuts</a></li>
                    <li><a href="#">VectorTuts</a></li>
                    <li><a href="#">PsdTuts</a></li>
                    <li><a href="#">PhotoTuts</a></li>
                    <li><a href="#">ActiveTuts</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <h3>Other Stuff</h3>
                <ul>
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <h3>Misc</h3>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   

            </div>

        </div><!-- End 4 columns container -->

    </li><!-- End 4 columns Item -->

	<li class="menu_right"><a href="#" class="drop">1 Column</a>

		<div class="dropdown_1column align_right">

                <div class="col_1">

                    <ul class="simple">
                        <li><a href="#">FreelanceSwitch</a></li>
                        <li><a href="#">Creattica</a></li>
                        <li><a href="#">WorkAwesome</a></li>
                        <li><a href="#">Mac Apps</a></li>
                        <li><a href="#">Web Apps</a></li>
                        <li><a href="#">NetTuts</a></li>
                        <li><a href="#">VectorTuts</a></li>
                        <li><a href="#">PsdTuts</a></li>
                        <li><a href="#">PhotoTuts</a></li>
                        <li><a href="#">ActiveTuts</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Logo</a></li>
                        <li><a href="#">Flash</a></li>
                        <li><a href="#">Illustration</a></li>
                        <li><a href="#">More...</a></li>
                    </ul>   

                </div>

		</div>

	</li>

    <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->

        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->

            <div class="col_3">
                <h2>Lists in Boxes</h2>
            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul>   

            </div>

            <div class="col_1">

                <ul class="greybox">
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   

            </div>

            <div class="col_3">
                <h2>Here are some image examples</h2>
            </div>

            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
            </div>

        </div><!-- End 3 columns container -->

    </li><!-- End 3 columns Item -->

</ul>

</body>

</html>

CSS:

body, ul, li {
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

/* Navigation Bar */

#menu {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */

	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

	/* Borders */

	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
	float:left;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;

	/* Background color and gradients */

	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

	/* Rounded corners */

	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
	padding-right:21px;
	background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("img/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;

	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
	left:-1px;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
	float:right;
	margin-right:0px;
}
#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}
.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}
.imgshadow {
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}
#menu li .black_box {
	background-color:#333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}
#menu li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}

Заключение

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

Автор: Guillaume Marty

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (22)

  1. Наталья

    Дорогие ребята, Виктор, Андрей и вся ваша команда!
    Приятно, что вы так много делаете полезной и нужной работы по обучению новичков, так сказать, приобщаете неучей к работе в интернете. Все хорошо, все замечательно, только уж слишком много грамматических ошибок в текстах. Если хотите, я бы могла проверять все ваши тексты, на наличие ошибок, за отдельную плату.
    Ваш ответ жду на E-mail: Natalochka-yralochka73@yandex/com
    С уважением, Наталья.

    • Виктор Рог

      Спасибо за помощь. Вы лучше укажите, где в тексте именно находятся грамматические ошибки.

  2. Андрей

    Вот о таком меню я мог только мечтать, начну пробовать создать его в срочном порядке!
    Если получится поменяю на своих сайтах! Большущее Вам спасибо, за такую инфу!!!
    Когда поменяю отпишусь!

  3. Андрей

    1.-moz-border-radius: 10px /* Пропущена точка с запятой ;*/
    2.-webkit-border-radius: 10px;
    3.border-radius: 10px;

  4. Сергей

    Наталья!
    А сколько Вы заплатили за полученную информацию, чтобы просить «отдельную плату» за редакторство?
    Да и «слишком много» — перебор!
    Приятно, что такие люди как Вы признают себя «неучами».
    Извиняюсь за колкость, но достали «грамотеи».
    Ведь можно было приватно подсказать!!!

  5. Albert

    Спасибо!
    Указывайте ссылку на первоисточник КОНКРЕТНО, а не на главную сайта. Хотел посмотреть оригинал, так и не нашёл.

  6. iHizgil

    Спасибо за то, что привели полный код!
    Смотрел на других сайтах-только запутали.Приводят сначала один код, например, так выглядит обычное меню: , но нам нужно мега меню и так во всем.Хотел отказаться, но было жалко: менюшка замечательно вписывалась в стиль сайта, а из-за некоторых я чуть её не потерял.Спасибо вам!

  7. Маша

    Огромное спасибо, очень помогло)

  8. freekir

    А в IE 6 должно работать? Просто я пробую, меню само отображается, а выпадающие списки нет. Вот думаю у меня косяк или этот способ не под IE 6.

  9. Евгений

    Замечательный урок. Я применил на одном из сайтов. Скажите , а что нужно изменить, чтобы сделать такое меню в footer-е? чтобы открывалось вверх?

  10. Семён.

    Спасибо за урок! Подскажите, как через CSS отключить часть кода в HTML, аналог, что бы подправить немного меню под себя?

    • Андрей Кудлай

      Например, с помощью свойства display и его значения none, которые прописываются для скрываемого элемента.

      • Семён.

        Подскажите, как тут сделать ориентацию по сайту, т.е. на какой странице находишься?

      • Семён

        А как тут сделать что бы было видно на какой странице ты находишься?

        • Андрей Кудлай

          Честно говоря, не совсем понял вопрос?.. Необходимы хлебные крошки или указание названия страницы в заголовке, или подсветка активного пункта меню? Давайте Вы конкретизируете вопрос на нашем форуме. В любом случае, здесь уже сложно обойтись только возможностями CSS и необходимо привлекать языки программирования.

  11. Марина

    Спасибо за урок, все подробно описано, можно создавать самим по образцу. Но никак не могу разобраться, как подключить файл index.html этого меню в header моего сайта. Очень прошу помогите, а уже замучилась!
    Заранее спасибо, Марина.

  12. Максим

    не смыслы в свойствах класса указывать float и display: inline, ибо когда указан флоат, то для элемента автоматом задается display: block

  13. Андрей

    Хочу сказать вам огромное спасибо. Очень доволен результатом)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree