Суббота, 26.05.2018, 01:41
Приветствую Вас Гость | RSS
Поиск
Главная | Каталог статей | Регистрация | Вход
Этот сайт посвящен програмированию
Форма входа
Меню сайта

Категории каталога
Мои статьи [3]

Друзья сайта

Наш опрос
Оцените мой сайт
Всего ответов: 22

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Мои статьи

Выпадающее меню
Создание многоуровнего выпадающего меню с помощью CSS, пары строчек Javascript, работающего корректно в Файрфоксе, Опере, Интернет Эксплорере и Сафари кажется вам непосильной задачей? Да ничего подобного!

Давайте развеем это заблуждение.

И так, для начала нам нужен список. Ведь большинство всех меню это ни что иное как список ссылок.

<ul id="nav">
<li><а hrеf="http://www.webmakerslounge.com/">Percoidei</a>
<ul>
<li><а hrеf="http://www.webmakerslounge.com/">Remoras</a>
<ul>
<li><а hrеf="http://www.webmakerslounge.com/">Echeneis</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Phtheirichthys</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Remora</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Remorina</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Rhombochirus</a></li>
</ul>
</li>
<li><а hrеf="http://www.webmakerslounge.com/">Tilefishes</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Bluefishes</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Tigerfishes</a></li>
</ul>
</li>
<li><а hrеf="http://www.webmakerslounge.com/">Anabantoidei</a>
</li>
</ul>


Теперь у нас есть хорошо структурированый список. Добавим к нему немного стилей:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}


Для селектора #nav li необходимо указать ширину, чтобы это корректно отображалось в Опере. Так же не забудьте указать clear:left для блока, который последует за меню, так как мы используем float.

Теперь нам необходимо само “выпадание”. добавляем следующие стили:
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}


Обратите внимание что здесь не используется display:none, для того чтобы сохранить максимальную доступность. Вместо него мы используем left: -999em. Это не обязательно и может быть легко заменено на display:none.

Вы конечно же обратили внимание на то, что у селектора li описан псевдо класс :hover, который конечно же не будет работать в Интернет Эксплорере. Для того, чтобы заставить наше выпадающее меню работать в Интернет Эксплорере мы используем этот маленький скриптик:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.
#nav li.sfhover ul{
left: auto;
}

Категория: Мои статьи | Добавил: programist (15.02.2008)
Просмотров: 459 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:

Copyright MyCorp © 2018