2983
- 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>
Можешь почитать и вот эту статейку "Облако тегов на CSS3"
Это тоже интересно
05.02.13Выпадающее меню на CSS
08.11.13Адаптивное навигационное меню
15.01.15Верстаем на Twitter Bootstrap
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.