cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Выпадающее меню на css

Дата: 24.09.2008

В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.

Начнем с горизонтального меню, оно имеет следующий HTML код:

<ul id="cssmenu">
	<li><a href="#">Горизонтальное</a>
		<ul>
			<li><a href="#">Ссылка 1</a></li>
			<li><a href="#">Ссылка 2</a></li>
		</ul>
	</li>
	<li><a href="#">CSS</a>
		<ul>
			<li><a href="#">Ссылка 1</a></li>
			<li><a href="#">Ссылка 2</a></li>
			<li><a href="#">Ссылка 3</a></li>
			<li><a href="#">Ссылка 4</a></li>
			<li><a href="#">Ссылка 5</a></li>
		</ul>
	</li>
	<li><a href="#">Меню</a>
		<ul>
			<li><a href="#">Ссылка 1</a></li>
			<li><a href="#">Ссылка 2</a></li>
		</ul>
	</li>
</ul>

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

/* CSS Document */
ul#cssmenu {
	width:350px;
	margin: 0;
	border: 0 none;
	padding: 0;
  	list-style: none;
	background: #003366;
  	height: 30px;
	font: bold 12px/28px Verdana, Arial;
	border-left:#003366 1px solid;
}

ul#cssmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
	height: 30px;
}

ul#cssmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
}

ul#cssmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#cssmenu ul li {
	width: 150px;
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#cssmenu a {
	border: 0px;
	padding: 0 10px;
	float: none !important;
	float: left;
	display: block;
	background: #003366;
	color: #FFFFFF;
	font: bold 12px/28px Verdana, Arial;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
	background: #FFFFFF;
	color:#003366;
	border-top:#003366 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
	border-top: 2px solid #FFFFFF;
	float: none;
	background: #003366;
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
	border-top: 2px solid #FFFFFF;
	background: #FFFFFF;
	color:#003366;
	border:#003366 1px solid;
}

ul#cssmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
	display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
	display: block;
} 

Все!?!? Ан нет. IE никак не хочет отображать такое меню как нам надо, поэтому напишем небольшой JavaScript для IE:

// JavaScript Document
function cssmenuhover()
{
	if(!document.getElementById("cssmenu"))
		return;
	var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
	for (var i=0;i<lis.length;i++)
	{
		lis[i].onmouseover=function(){this.className+=" iehover";}
		lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
	}
}
if (window.attachEvent)
	window.attachEvent("onload", cssmenuhover);

Вуаля. Теперь наше меню кроссбраузерное и корректно работает в IE5.5+, FF1+, Opera8+. Теперь посмотрим как делается вертикальное меню.

Вертикальное CSS меню

HTML код:

<ul id="navmenu-v"> 
    <li><a href="#">Вертикальное</a>
    <ul> 
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        </ul></li> 
    <li><a href="#">CSS</a> 
      <ul> 
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        <li><a href="#">Ссылка 3</a></li>
        <li><a href="#">Ссылка 4</a></li>
        <li><a href="#">Ссылка 5</a></li>
        </ul>
        </li> 
        <li><a href="#">Меню</a>
        <ul> 
        <li><a href="#">Ссылка 1</a></li>
        <li><a href="#">Ссылка 2</a></li>
        </ul></li>  
  </ul>

И CSS код:

/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; 
  list-style: none;
}

ul#navmenu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left; 
  display: block !important; 
  display: inline; 
  position: relative;
  border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}

/* Root Menu */
ul#navmenu-v a {
  padding: 0 6px;
  display: block;
  background: #003366;
  color: #FFFFFF;
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%; 
}


ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #FFFFFF;
  color: #000000;

}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #003366;
  color: #FFFFFF;
  border:#003366 1px solid;
}


ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #FFFFFF;
  color: #003366;
  border:#003366 1px solid;
}



ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
}


ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}

Ну и небольшой JS код для корректности отображения в IE:

navHover = function() {
	var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Вот собственно и все, смотрим что получается.

Скачать >>

CSS горизонтального меню, JS горизонтального меню | CSS вертикального меню, JS вертикального меню

10.05.2011

Спасибо большое!
Все отлично работает, кроме IE
Посмотрите пожалуйста, в чем может быть проблема?

10.05.2011

Спасибо огромное! То что искал.

14.05.2011

Привет админ, огромное спасибо за меню. Вот только в ИЕ подменю залазит под рекламный баннер. В комментариях я прочел решение и в 4-х типах браузеров оно работает кроме ИЕ, может быть у вас есть решение и на этот случай?
{ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
position:relative; z-index:100;
}}

24.05.2011

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

26.05.2011

Хорошо написано, спасибо!
А подскажите, пожалуйста, в js совсем нуб. У меня список меню не с id а с class, a ie6 не поддерживает .getElementsByClassName, нашел как написать функцию, чтобы.getElementsByClassName определять вручную, а дальше не могу сообразить, как это все собрать! У меня сейчас так:

document.getElementsByClassName = function(cl) { //функция } function cssmenuhover() { // var lis = document.getElementsByClassName("cssmenu").getElementsByTagName("LI"); // и дальше как здесь описано } if (window.attachEvent) ///по примеру

В css естесно .menucss)
Пасибо заранее!

26.05.2011

тупанул в предыдущем сообщении, в css, конечно же, .cssmenu!

28.05.2011

Все, разобрался сам) Спасибо за статью!

познавательно, но хотелось бы без JS

30.06.2011

Спасибо огромное за статью.
Такой вопрос: как добавить еще несколько разделов меню? Я когда добавляю, они у меня группируются по 3 и располагаются не в линию а друг под другом.

12.07.2011

спасибо за меня , все просто и ничего лишнего.

15.07.2011

спасибо огромное человеческое! все работает, firefox+opera+Ie

щиииикарно!

29.07.2011

подскажите как из такого обычного горезонтального меню сделать выдвижное,вот цсс код

 
 p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
 padding-top: 1em;
}

вот штмл
03.08.2011

Хочу сделать третью ступень к вашему меню, и никак не получается в css все что можно дописывал менял не получается, т.е. мне надо сделать так чтобы из выпадающего меню выпадало еще 1 меню. Подскажите пожалуйста!!!

04.08.2011

Доброго времени суток!

Уважаемый автор, подскажите пожалуйста, где и что прописать в коде CSS вашего вертикального меню, чтобы вложения (подменю) открывались не вправо (как у вас), а наоборот, влево, т.е. в противоположную сторону?

04.08.2011

66668888

07.08.2011

отлично.
все работает.
только как бы сделать подменю еще.

07.08.2011

администратор! уже раз пять пытаюсь отписаться от рассылки - ничего не получается!

09.08.2011

Как сделать чтоб выпадающее меню было поверх sidebar'a?

11.08.2011

Здравствуйте! Не могли бы Вы подсказать... как сделать так, чтобы при выпадении вертикального меню во фрейме оно не перекрывалось другой частью фрейма? какое свойство CSS за это отвечает?

16.08.2011

Подскажите, пожалуйста. Как добавить в меню подпункт выпадающий из подпункта?

18.08.2011

Спасибо за меню,очень пригодилось!Все работает.Только вот у меня меню с картинками и всплывающее меню не перекрывает картинки,а заходит за них.Можно ли это как то исправить? Подскажите,пожалуйста.

26.08.2011

Всем кто не понял - подпункты добавляются через HTML, а не CSS...

Автору большое спасибо за горизонтальное меню, буду эксперементировать с его оформлением :)

15.09.2011

Ой, прямо и не знаю. Ребята пишут: то им не так, это не так. А мне все так! Идея-то ясна. Там уже, что нужно, можно исправить самостоятельно.
Короче, уважаемый автор, большое спасибо за статью! Вот =)

15.09.2011

Немного непонятно, для чего в горизонтальном меню и в правиле для ul list-style: none, и тут же дублируется то же в правиле для li list-style: none для того же списка, насколько я понимаю li унаследует это свойство от ul.

/* CSS Document */
ul#cssmenu {
        width:350px;
        margin: 0;
        border: 0 none;
        padding: 0;
        list-style: none;
        background: #003366;
        height: 30px;
        font: bold 12px/28px Verdana, Arial;
        border-left:#003366 1px solid;
}
ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
        height: 30px;
}
22.09.2011

прекрасное, простенько и со вкусом. Как раз то, что искал. :)))

22.09.2011

Здравствуйте.
У меня ничего не получилось.
на html код списка понятен
А ват куда добавить текст на CSS?????
Очень прошу ответить

28.09.2011

ура работает! Спасибо ^_^

16.10.2011

Есть интересный вариант (но с JavaScript) на http://sitemaker.x10.bz/downloads.php?id=19

01.11.2011

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

07.11.2011

Здравствуйте!
Меню работает! И в Firefox, и в Google Chrome, и в Opera, и в IE7!
А в IE9 - почему-то не желает! :-)

08.11.2011

Доброго времени суток! Подскажите кто-нибудь, весь день бьюсь. У меня меню второго уровня почему-то отображается под слоем меню первого уровня. Ничего не могу поделать и придумать...
http://en.nstu.ru

08.11.2011

здравствуйте.
Вопро по меню. про злополучное расположение по центру. Выстави в css не фиксированную ширину
{ul#cssmenu {
width:100%;
margin: 0 auto;}

, margin не работает. Хоть ты тресни. А хотелось бы, чтобы меню было посередине. Пробовала всё и div align, и center...(
Если в css указываю фиксированную ширину - всё встаёт по центру.
Есть ли способ отцентрировать меню с % шириной?

10.11.2011

Спасибо, помогло. Сделал все, а в gChrome и Safari косячило. Оказалось из-за float:left; стащил у Вас пару определений стилей и все заработало. благодарю )

10.11.2011

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

21.11.2011

я самоучка и только научился создавать html документы, а CSS еще не изучил.....отправьте мне на майл как должно получиться пожалуйста (g_gazimagomedov@mail.ru)заранее спасибо))))

21.11.2011

я самоучка и только научился создавать html документы, а CSS еще не изучил.....отправьте мне на майл как должно получиться пожалуйста (g_gazimagomedov@mail.ru)заранее спасибо))))

21.11.2011

я самоучка и только научился создавать html документы, а CSS еще не изучил.....отправьте мне на майл как должно получиться пожалуйста (g_gazimagomedov@mail.ru)заранее спасибо))))

21.11.2011

ТОЧНЕЕ ОТПРАВЬТЕ МНЕ КОД ВСЕЙ СТРАНИЦЫ))))

21.11.2011

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

Это что-то с чем-то. Но я перелопатил кучу менюшек и на jquery, и javascript, но что бы они как-то адекватно работали сразу в Хроме и Ишаке не мог настроить. При небольшом вмешательстве с напильником в это меню удалось его сделать действительно универсальным. Только не могу понять почему в Хроме под менюшкой нету пробела, а в Ишаке есть в 15-20 пикселей.
И еще когда делаю вложенное меню не заливкой в колоре, а в Гифе, то в Ишаке оно соскакивает.
Но тому, кто написал ЭТО - РЕСПЕКТ!

24.11.2011

Добрый вечер! Подскажите как исправить ошибку! В Dreamwearver создала два файла ccs и js. Скопировала коды и сохранила под именем как в примере cssmenustyles.css и cssmenujs.js. в свой файл html добавила теги таблиц как у автора и вставила скрипты между тегами head. Возникла синтактическая ошибка в файле cssmenujs.js а именно в строке

navHover = function() { var lis = document.getElementById("navmenu-v").getElementsByTagName("LI"); for (var i=0; i

24.11.2011

спасибо получилось, только так и осталась надпись о синтаксической ошибке.

24.11.2011

Ну все и ошибку исправила, просто поставила пробелы и перенесла строки по порядку))))

24.11.2011

Пож-та подскажите,как изменить фон меню и подменю не на цвет а на графику, например в фотошопе.

24.11.2011

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

23.12.2011

Уважаемый автор блога.
Не нашла формы обратной связи, поэтому напишу тут.
Исправьте, пожалуйста, плагин подписки на комментарии. Вместо новых комментариев на почту приходит начало статьи. Все-таки удобней, когда в ящике - комментарий.
И вот еще - вас заспамили... враги )))

03.01.2012

Рабочее выпадающее меню на css
http://divhack.com/node/36

23.02.2012

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

21.03.2012

Огромное спасибо! Меню получилось(горизонтальное)) Такая проблема: делаю сайт с помощью фреймов, и получается так, что когда наводишь курсор на меню, естественно, выпадают какие и должны ссылки, но в результате появляется полоса прокрутки(из-за увеличения фрейма). Как можно обойти такую ситуацию? Есть ли другой код? (Админ, большая просьба отписаться на ящик, спасибо)