
Сегодня мы посмотрим как сделать вот такое выпадающее меню только средствами 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]-->РезультатСобрав все воедино, мы получаем наше горизонтальное выпадающее меню.Если у вас есть что-то подобное в загашнике (ссылки на хорошие решения, примеры различной реализации и так далее), то делитесь ими в комментах.

