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

Можешь почитать и вот эту статейку "Шаблон Madison 2"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 3785 дней
  • Новостей: 561
  • Комменты: 254
  • Зарегистрированно : 619
  • Онлайн всего: [6]
  • Гости: [6]
  • Были сегодня : [3] dankeanke, Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.329сек
  • Потребление памяти: 5.168 Mb 
  •   яндекс.ћетрика