Войти Регистрация

CSS меню: выпадающее горизонтальное меню на css


Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.

Если вам нужно простое горизонтальное меню. Читаем статью о создании горизонтального css меню. Освоив основы приступайте к созданию выпадающего меню.

Вариант 1 - Выпадающее горизонтальное меню

Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.

горизонтальное выпадающее меню на css

Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:

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

Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).

Давайте рассмотрим CSS код:

#header { height:120px; position:relative;

background: transparent url(header_bkg.png) repeat-x scroll top center;}

#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}

#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 

position:relative; padding:10px; width:100px;}

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

#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}

#nav li ul li { list-style-type:none; margin:10px 0 0 0;}

#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}

#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}

#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не влаживается, для чего использовать JavaScript, разве что для плавного сворачивания и разворачивания.

Вариант 2 - горизонтальное меню + решение для IE6

Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:

css горизонтальное меню с решением для IE6

Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.

HTML

<ul id="menu">
	<li><a href="#">Пункт №1</a></li>
	<li>
		<a href="#">Пункт №2</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
			<li><a href="#">Подпункт №2</a></li>
			<li><a href="#">Подпункт №3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №3</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="#">Пункт №4</a>
		<ul>
			<li><a href="#">Подпункт №1</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт №5</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>
</ul>

CSS

#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-family: Georgia;
	}
#menu li {
	list-style: none;
	float: left;
	height: 33px;
	padding: 0;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #171717;
	position: relative;
	padding-top: 12px;
	}
#menu li ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 150px;
	display: none;
	position: absolute;
	left: 0;
	top: 45px;
	}
#menu li ul li {
	float: none;
	height: 33px;
	margin: 0;
	width: 150px;
	text-align: center;
	background: #7F7F7F;
	}
#menu li a {
	display: block;
	width: 150px;
	height: 33px;
	color: #fff;
	text-decoration: none;
	}
#menu li:hover ul, #menu li.jshover ul {
	display: block;
	}
#menu li:hover, #menu li.jshover {
	background: #424242;
	}

JS – решение для IE6

<script>
	jsHover = function() {
	var hEls = document.getElementById("menu").getElementsByTagName("li");
	for (var i=0, len=hEls.length; i<len; i++) {
	hEls[i].onmouseover=function() { this.className+=" jshover"; }
	hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
	}
	}
	if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

Это все, надеюсь, у вас все получится. Если вы знаете, как сделать горизонтальное выпадающее меню на css другим способом, прошу им поделиться им в комментариях.



Дальше: Создание сайта для SAPE


Дискуссия по теме    44 Комментария 
Добавить комментарий
Аслан 28.09.2015 в 14:42
Здравствуйте. Скажите, пожалуйста, как преодолеть вот такую проблему... коды я добавил и меню раскрывается, но его прячет фоновой рисунок темы. Можно сделать так, чтобы меню было поверх рисунка фона? Спасибо
Вадим 01.06.2015 в 21:01
Здравствуйте, искал, смотрел видео как сделать горизонтальное меню примерно 3 недели, но наткнулся на ваш блог и всё нашёл!!! Спасибо вам большое!!!
Солнце 13.05.2015 в 14:52
добрый день,а как закрепить меню,чтобы при сворачивании страницы меню не переходило на следуещею строку?
Тарас 14.05.2015 в 12:08
Добрый день. Не совсем понимаю что Вы имеете в виду... можете дать ссылку на пример, или описать подробнее?
Евгений 25.01.2015 в 20:44
Прошу прощения, что засоряю стену, но не могли бы Вы помочь, у меня не было выпадающего меню в шаблоне, частично я дописал используя Ваш урок. В итоге вроде получилось , но при наведении на выпадающее меню появляется список, но он при этом отодвигает тело сайта вниз. Выглядит это ужасно. Не могли бы Вы глянуть что в этом коде не так? .nav { text-align:center; border-top: 1px solid #ccc; margin-top: 20px; padding-top: 8px; } .nav ul li { float:left; width: 140px; color: #666; list-style-type:none; } .nav ul li a { border-bottom:1px solid #ddd; border-right:1px solid #ddd; display:block; margin-left:10px; } .nav ul li a:hover { color:#000; background:#ddd; } .nav li:hover> ul { display:block; } .nav li ul { margin:0px; padding:0px; display:none; }
dimasnaiper 31.01.2014 в 00:14
почему при горизонтальном выпадающем меню, при увеличении масштаба - меню переходит на вторую строку. Как закрепить в одной строке.
Николай 17.04.2013 в 23:24
P.S. Я использовал Вариант 2
Тарас 18.04.2013 в 12:07
Проще будет решить это с jquery http://vremenno.net/html-css/css-drop-down-menu/
Николай 19.04.2013 в 14:50
Спасибо! Классно вышло! http://joxi.ru/5CBxUdg5CbCQKFedur4 Заготовку брал отсюда: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm ссылку на заготовку нашел здесь (в комментах): http://vremenno.net/html-css/css-drop-down-menu/
Николай 17.04.2013 в 23:22
Подскажите как сделать в этой менюшке третий уровень (наводим на пункт меню, выпадает список с подпунктами, где мы наводим на какой-нибудь подпункт, после чего выпадает рядом (справа/слева) еще один список как бы с подподпунктами основного меню) Как-то так должно быть: http://joxi.ru/8N9uUdg5CbCIJnlcYL4
АмЫнЪ 28.03.2013 в 19:40
Это всё хорошо но надо сделать меню, которое будет выпадать по нажатию :active это делает, но кратковременно :( Причина в популярности сенсорного управления, где нет мышки. Надо чтоб работало везде.
Daisy 22.03.2013 в 11:52
У меня при наведении на пункт меню изменяется его фоновая заливка и выпадает список, Но при перемещении курсора на подменю пропадает заливка родительского пункта меню. Не пойму почему так, как это исправить подскажите пжлст
Тарас 22.03.2013 в 22:33
Какой браузер? и если можно ссылку с примером.
Daisy 23.03.2013 в 08:45
Я проверяла в Хроме 25.0, в Мозилле 19.0.2. Делаю пока на локалке, так что только так: http://tinkerbin.com/TU1dgStO
Тарас 24.03.2013 в 14:06
У вас hover прописано на ссылку а не на родительский li элемент. Замените .b-top_menu__item-link:hover на .b-top_menu__item:hover
Daisy 24.03.2013 в 14:22
а ведь точно) Спасибо огромное! Вы мне очень помогли!
Lilla 14.03.2013 в 09:04
Сделала меню на основе примера - на локальном сервере все работает нормально, а при загрузке на действующий сайт теряется всё форматирование :( Как будто не видит ни одного свойства css... Пробовала вставлять такое же меню, как у вас, без изменений - то же самое. Не могу понять, почему такое происходит? На денвере все работает в разных браузерах.
Тарас 14.03.2013 в 14:26
Может быть в кэше хранится старый файл стилей. Попробуйте в другом браузере открыть. Если не разобрались, давайте ссылку на пример, посмотрю...
Чур 23.09.2012 в 22:56
Уточните пожалуйста более детально, как же всё таки вставить тонкую рамочку вокруг выпадающего блока меню (с трёх сторон - слева, справа и снизу)? Там в коментах Тарас писал, что он вставляет какую-то рамочку, типа border: 1px solid #F00; - но куда именно в коде её нужно вставить, он не указал, а мне, неопытному, определить это самостоятельно большая проблема. Понял только, что в код CSS. Не могли бы прописать, как это конкретно должно выглядеть в вышеприведённом коде?
Тарас 24.09.2012 в 12:53
Я использую эту рамку, чтобы обвести конкретный блок красным цветом и видеть его точные координаты. Например, страница белого цвета и div блок тоже белого. Я применяю этот атрибут: div {border: 1px solid #F00;} Вижу где и как распологается этот блок. Можно также задавать цвет фона, или пользоваться средствами для разработчиков в браузере. Во всех новых браузерах имеется возможность отследить параметры, стили, разметку каждого элемента страницы.
slaV 17.09.2012 в 13:05
а если это MVC и одно меню, рендерится на все последующие страницы. как в таком случае можно организовать активное меню, если все пункты собранны в одном месте, выходя только с вашего примера, без JS
Тарас 18.09.2012 в 22:35
Мне сложновато понять о чем вы... если есть пример кода покажите. Если это MVC, в вид этой архитектуры передаете массив с данными о каждом пункте меню, какой активный а какой не активный. Или, если адресная строка содержит транслит названия меню или ID активного меню, можно определить его с помощью глобального массива $_SERVER['REQUEST_URI']; Например, адрес domain.com/menu/124 Та переменная вернет menu/124 - вот имеете ID активного меню... Этот вопрос более касается техники php нежели html и css. Или вы имеете в виду что-то другое? Если можно дайте пример.
slaV 16.09.2012 в 21:52
скажите пожалуйста, как сделать, что б активный пункт меню, оставался цвета наведения, а не возвращался к базовому цвету. либо отметить другим цветом активное меню, посредством только организации кода html и css, к сожалению, в вашем примере такое не предусмотрено.
Тарас 17.09.2012 в 11:51
Создаете еще один класс в файле стилей , например: .active {background:#f00;} После чего в html коде присваиваете его к нужному (активному) разделу меню, например: <li class="active"><a href="">пункт меню</a></li>
Юрий 26.08.2012 в 18:34
Спасибо реально рабочий метод, хоть и с javascript, я тоже пока не нашёл кросбраузерного решения на чистом css, но оно есть, при этом css кода становится слишком много, дешевле будет использовать скрипты!
вик 09.08.2012 в 16:36
класс!
Andrey 22.06.2012 в 12:54
У меня таже проблема, но возникает она только в IE. Как решить пока не знаю. На всякий случай даю часть странички http://www.nktcables.com.ua/ua/index1.php
Andrey 22.06.2012 в 17:50
Нашел в чем причина: Для "li a" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню.
Олег 07.06.2012 в 23:55
Воспользовался Вашим примером и встроил в свой сайт горизонтальное меню, возникла сложность: если выпадающий список с подменю накладываются на элементы сайта, которые находятся ниже меню, то во-первых выпадающий список прячется за эти элементы сайта, а во-вторых не работают ссылки. Побывал добавлять z-index, не помогло, подскажите пожалуйста как решить проблему.
Тарас 09.06.2012 в 19:54
Если бы я мог видеть эту страницу... причина может быть не именно в самом меню, а в рядом стоящих div блоках. Когда я верстаю, очень часто использую атрибут border: 1px solid #F00; клею эту рамку практически к каждому блоку, чтобы видеть его размер и позицию среди других... Если это меню не помогло и исправить не удается, можете посмотреть вариант с jquery, если устроет... http://sitear.ru/material/gorizontalnoe-vypadayushchee-menyu-na-jquery
iiuri kondrashev 21.05.2012 в 14:31
Замечательная статья ,но остались вопросы.Подскажите,пожалуйста,куда пихать скрипт для ie6.У меня почему-то отображаются только 4 пункта меню.ширина body 720 px
Тарас 21.05.2012 в 21:19
Js решение для IE6 пихаете внутрь header блока (между <header> и </header>). А почему только четыре пункта даже не знаю... может быть потому что ширина body 720px, в меню 5 пунктов шириной по 150px, если умножить получается 750... попробуйте уменьшить ширину li элементов первого уровня, или просто расширьте body
anonim 24.04.2012 в 16:55
все бы хорошо, но нижний контент смещается при наведении курсора на пункты меню, т.е. ниспадающее подменю его сдвигает вниз:(
ALDAN 18.03.2012 в 23:29
http://jemand.ru/examples/gorizontalnoe-vypadayushhee-menyu-na-css.html это сам что ни на есть образец по исходному коду прописываем и все хорошо за исключением навязчивого фона. Убираем link и получаем свой фон, но приобретаем отступы от футера и верхней части таблицы, valign не спасает. Пробую ваш образец, все то же самое но ни слова про link.Вопрос: как сохранить фон без link или с ним, и убрать отступы сверху и снизу. Есть решение, отпишитесь. Заранее спасибо.
Тарас 18.03.2012 в 23:32
Често говоря, я не веду в суть вопроса... я тестирую css следующим образом: к каждому стилю элементов добавляю border:1px solid #f00; вокруг элемента создается рамка, по которой я могу судить о размерах и отсупах этого элемента.
иван 13.02.2012 в 14:12
то что я и искал спасибо автору ...а не мог бы ты выкинуть ещё выпадающее вниз боковое а то это первый действительно понятный сайт без лишних пояснений
Тарас 13.02.2012 в 14:18
К сожалению, не имел опыта создавать выпадающее боковое меню (((
ALDAN 24.03.2012 в 19:17
http://apycom.com/ Рекомендую. Много чего интересного.
Тарас 24.03.2012 в 21:45
Спасибо ALDAN, классный ресурс, жаль что только в бесплатной версии ограниченые возможности меню (((
Анастасия 26.01.2012 в 00:43
Я благодарю автора за столь понятную и главное Работающую информацию без косяков и проблем!!!! Очень признательна - вы увеличили время моего ночного сна :)))
Тарас 10.01.2012 в 12:10
Владимир, нужно сделать ul блочным элементом, для этого в стилях укажите display:block; а потом выровнять через text-align или через margin:auto... Если не разберетесь, вот статья по центрированию элементов: http://sitear.ru/material/css-centrirovanie-gorizontalno-i-vertikalno
Владимир 09.01.2012 в 16:31
А всё таки, как выровнять меню по центру, но чтобы не добавило ошибку ни в htmд, ни в css?!!
Тарас 14.10.2011 в 01:09
Можно попробовать влепить text-align:center; в атрибут #nav, если не работает, то HTML код меню взять в тег center.
Александр 14.10.2011 в 00:04
А как это меню по центру выровнять не подскажите?
Добавить комментарий
Просмотров: 76121