Простое горизонтальное субменю на CSS

Дата: 04.09.2009 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , ,

simplesubmenu.gif

Зачастую для отображения субменю (или иначе — выпадающее меню) используют вложенные списки. Хотя на самом деле можно обойтись всего лишь одним списком <ul></ul>, а пункты субменю сделать в виде вложенных в один пункт списка ссылок. Верхняя ссылка будет соответствовать заглавному пункту, а все остальные, невидимые изначально (используется свойство display: none;), будут отображать пункты субменю.

Принцип тут довольно прост: все пункты субменю взяты в тэг <span></span>, которому мы зададим ряд свойств. Во-первых, как я уже и указал, эти пункты изначально невидимы (свойство display: none;). Во-вторых, пункты субменю вытянуты в линию и разделены вертикальной чертой | что придает визуально сходство с основным меню. В-третьих, блок span при помощи абсолютного позиционирования (position: absolute;) и сдвига на 35 пикселей от верха (top:35px;) размещается как раз под основным меню. Причем при помощи одноцветного фона для выбранного основного пункта и самого субменю задается визуальное соответствие.

Ниже приведен весь код страницы. За идею спасибо sohtanaka.com.

<html>
<head>
<style type="text/css">
* {
border: 0;
padding: 0;
margin: 0;
}
#nav {
float: left;
width: 500px;
list-style: none;
position: relative;
}
#nav li {
float: left;
border-right: 1px solid #999;
}
#nav li a {
padding: 10px 15px;
display: block;
color: #00c;
text-decoration: none;
}
#nav li a:hover {
color: #fff;
text-decoration: none;
}
#nav li:hover {
background: #06f;
}
#nav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 500px;
background: #06f;
color: #fff;
}
#nav li:hover span {
display: block;
}
#nav li span a {
display: inline;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Раздел 1</a></li>
<li>
<a href="#">Раздел 2</a>
<span>
<a href="#">Подраздел 1</a> |
<a href="#">Подраздел 2</a> |
<a href="#">Подраздел 3</a>
</span>
</li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>

Да, этот эффект не работает в ИЕ6. Чтобы победить ослика, можно применить специальный скрипт, который необходимо добавить в пределах тэга <head></head>:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#nav li").hover(function() {
$(this).css({ 'background' : '#06f'});
$(this).find("span").show();
} , function() {
$(this).css({ 'background' : 'none'});
$(this).find("span").hide();
});
});
</script>

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (6) на запись “Простое горизонтальное субменю на CSS”

  1. Алексей 09.12.2009 20:46

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

  2. Алексей 09.12.2009 21:18

    на свой первый вопрос ответ нашел, но только на половину - разобрался как сделать это в ff и opera, а вот js к сожалению не знаю, как это осуществить для ie?

  3. Игорь 20.12.2009 20:42

    Алексей поддерживаю.
    А действительно как сделать такое же меню вертикально.
    Что бы подменю находилось прям под выбранным меню.
    Пример:

    ГЛАВНАЯ
    подменю1
    подменю2
    ВТОРАЯ СТРАНИЦА
    подменю1
    подменю2
    подменю3

  4. Игорь 20.12.2009 21:12

    То есть именно при нажатии, а не наведении
    появлялся список с подменю?

  5. Игорь Квентор 23.12.2009 18:26

    Алексей не даром упомянул js, потому как для ИЕ сделать все на css бывает достаточно сложно. Хотя насколько я помню, были и такие варианты. Если найду - расскажу обязательно.

  6. Юлия 11.02.2010 15:19

    Кто-нибудь из Игорей ;) нашёл пример вертикального выпадающего меню, работающего В ИЕ и с js?????

Трэкбеки

Оставить комментарий