Хаки и Скрипты Next Generation CMS : Меню и навигация : Выпадающее меню на CSS

irbees2008 Опубликовано - 16 - апреля Меню и навигация

Автор: --------------
Адаптировал: 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.Подгоняем стили,меняем ссылки и пользуемся

Можешь почитать и вот эту статейку "Выводим дополнительные поля xfields в секцию head вашего шаблона"

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

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