• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3363 подписчика
• наш твиттер
  396 фолловеров

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

29 декабря 2008, 2:00 Павел Марковнин HTML и CSS рейтинг 26

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

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

Рассматриваемый нами фреймворк позволит вам сделать не только горизонтальное, но еще и вертикальное, и линейное меню. Файлы стилей разбиты таким образом, что вам останется только добавить свой стиль и меню готово.

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

HTML

Для начала рассмотрим как должна выглядеть HTML разметка нашего меню. Здесь все очень просто — все меню это вложенные списки.

<ul class="dropdown">
	<li ><a href="/html-css/css-drop-down-menu/">Вернуться к статье</a></li>
	<li><a href="./" class="dir">Посмотреть разделы сайта</a>
		<ul>
			<li><a class="dir" href="/html-css/">HTML и CSS</a>
            	<ul>
                	<li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                </ul>
			</li>
			<li><a href="/js/">JavaScript</a></li>
			<li><a href="/photoshop/">Photoshop</a></li>
			<li><a href="/design/">Дизайн</a></li>
			<li><a href="/misc/">Разное</a></li>
		</ul>
	</li>
</ul>

Класс dir ставится на тех элементах, которые содержат вложенности.

CSS

У нас будет 2 файла со стилями. Один отвечает за расположение элементов меню, второй — за внешнее оформление (что-то вроде скина).

Посмотрим первый.

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.dropdown {
	position: relative;
	z-index: 597;
	float: left;
}

ul.dropdown li {
	float: left;
	line-height: 1.3em;
	vertical-align: middle;
	zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}

ul.dropdown ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
	width: 100%;
}

ul.dropdown ul li {
	float: none;
}

ul.dropdown ul ul {
	top: 1px;
	left: 99%;
}

ul.dropdown li:hover > ul {
	visibility: visible;
}

JavaScript

Как вы смогли заменить по CSS, мы используем псевдо класс :hover для того, чтобы показывать куски меню. Этот самый псевдо класс работает во всех браузера, кроме… да, вы угадали, нашего любимого IE. Поэтому для ослика мы сделаем что-то вроде эмуляции этого псевдо класса. В качестве js фреймворка возьмем jQuery.

$(document).ready(function() {
	$("ul.dropdown li").hover(function() {
		$(this).addClass("hover");
		$('> .dir',this).addClass("open");
		$('ul:first',this).css('visibility', 'visible');
	}, function() {
		$(this).removeClass("hover");
		$('.open',this).removeClass("open");
		$('ul:first',this).css('visibility', 'hidden');
	});

});

А теперь подключаем эти файлы к нашей странице только для IE.

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

Результат

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

Ах, да, чуть не забыл. Немного модифицировав CSS, можно так же получить вертикальное и линейное меню.

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

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•