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

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>

04.09.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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