2817
- 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>
Код:
#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;
}Было бы всё хорошо, но 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>
Можешь почитать и вот эту статейку "Теги dt"
Это тоже интересно
05.02.13Выпадающее меню на CSS
08.11.13Адаптивное навигационное меню
15.01.15Верстаем на Twitter Bootstrap
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.