Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 16 - апреля Меню и навигация
2133 - 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.Подгоняем стили,меняем ссылки и пользуемся

Можешь почитать и вот эту статейку "Обалденные эффекты для кнопок на CSS3"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [16]
  • Гости: [14]
  • Поисковики: [2] Яндекс, Яндекс
  • Были сегодня : [6] Google, Яндекс, Яндекс, redflame, Яндекс, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 1.382сек
  • Потребление памяти: 4.966 Mb 
  •   яндекс.ћетрика