• 1347
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Рассмотрим как можно сделать выпадающее меню без использования ява скрипта, только на css. Правда, для нашего ИЕ6 скрипт всё-таки придется применить

1.сначала делаем разметку для меню.

Код:
<ul id="menu">
<li><a href="#">Главная</a></li>
<li>
<a href="#">О компании</a>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Состав</a></li>
</ul>
</li>
<li>
<a href="#">Наши продукты</a>
<ul>
<li><a href="#">Колбаса</a></li>
<li><a href="#">Мороженое</a></li>
<li><a href="#">Арбузы</a></li>
<li><a href="#">Апельсины</a></li>
<li><a href="#">Мучные изделия</a></li>
</ul>
</li>
<li><a href="#">Контактная информация</a></li>
</ul>
2.Добавим стили:
Код:
#menu{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
height:20px;
padding:0;
margin:0;
width:150px;
text-align:center;
background:#0CF;
position:relative;
}
#menu li ul{
list-style:none;
padding:0;
margin:0;
width:150px;
position:absolute;
left:0;
top:20px;
display:none;
}
#menu li ul li{
float:none;
height:20px;
margin:0;
width:150px;
text-align:center;
background:#0CF;
}
#menu li a{
display:block;
width:150px;
height:20px;
}
#menu li:hover ul{
display:block;
}
#menu li:hover{
background:#F00;
}
3.Поясняю, как вы видите из css, основное «движение» меню идет с помощью добавления hover на элемент списка li. т.е. при наведении мышки на тег li мы показываем внутренний список меню- display:block. До этого мы его скрывали display:none.
Было бы всё хорошо, но IE 6 понимает hover только для ссылки, т.е. тега -а-. Для этого придется использовать скрипт, который к каждому тегу li при наведении будет добавлять класс jshover. При помощи этого скрипта и совсем мало видоизмененного css придем к рабочему варианту выпадающего меню:

Код:
    <style>
#menu{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
height:20px;
padding:0;
margin:0;
width:150px;
text-align:center;
background:#0CF;
position:relative;
}
#menu li ul{
list-style:none;
padding:0;
margin:0;
width:150px;
display:none;
position:absolute;
left:0;
top:20px;
}
#menu li ul li{
float:none;
height:20px;
margin:0;
width:150px;
text-align:center;
background:#0CF;
}
#menu li a{
display:block;
width:150px;
height:20px;
}
#menu li:hover ul, #menu li.jshover ul{
display:block;
}
#menu li:hover, #menu li.jshover{
background:#F00
}
</style>
<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>

<ul id="menu">
<li><a href="#">Главная</a></li>
<li>
<a href="#">О компании</a>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Состав</a></li>
</ul>
</li>
<li>
<a href="#">Наши продукты</a>
<ul>
<li><a href="#">Колбаса</a></li>
<li><a href="#">Мороженое</a></li>
<li><a href="#">Арбузы</a></li>
<li><a href="#">Апельсины</a></li>
<li><a href="#">Мучные изделия</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
4.Подгоняем стили,меняем ссылки и пользуемся

Можешь почитать и вот эту статейку "Меняем фон или шапку сайта по времени года"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

----