Многоуровневое выпадающее меню (JavaScript)

Вступление

Выпадающее меню можно сделать используя один лишь CSS, но, проблема как всегда в браузере Internet Explorer, который умеет обрабатывать событие hover только в теге <A>

Кто не любит читать статьи, предлагаю сразу перейти к наглядному примеру или скачать архив с примером 5,30Кб.

Что понадобится

HTML-файл, CSS-файл, JavaScript-файл и маркированный список, который будет в виде древовидной структуры (последовательности выпадающего меню).

HTML

Создаем файл dropdownmenu.html следующего содержания:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Многоуровневое выпадающее меню (JavaScript+CSS)</title> <link rel="stylesheet" type="text/css" href="dropdownmenu.css"> <script type="text/javascript" src="dropdownmenu.js"></script> <script type="text/javascript"> function init() { (new ddMenu('mainmenu')); (new ddMenu('menu2')); } </script> </head> <body onLoad="init()"> <ul id="mainmenu"> <li><a href="/">Главная</a></li> <li><a href="/internet.php">Представительства</a> <ul> <li><ins id="vkontakte"></ins><a href="http://vkontakte.ru/expange">В Контакте</a></li> <li><ins id="facebook"></ins><a href="http://www.facebook.com/pages/Expange/103065229769965">Фэйсбук</a></li> <li><ins id="friendfeed"></ins><a href="http://friendfeed.com/expange">Френдфид</a></li> <li><ins id="livejournal"></ins><a href="http://expange.livejournal.com/">Лайвжорнал (ЖЖ)</a></li> <li><ins id="twitter"></ins><a href="http://twitter.com/expange">Твиттер</a></li> </ul> </li> <li><a href="/news/">Новости</a> <ul> <li><a href="/news/2011/">2011</a></li> <li><a href="/news/2010/">2010</a></li> </ul> </li> <li><a href="#">Все остальное</a> <ul> <li><a href="/faces.php">Лица expange</a></li> <li><a href="/images/">Изображения</a></li> <li><a href="/about.php">О проекте</a></li> <li><a href="/terms.php">Правила пользования</a></li> </ul> </li> <li><ins id="af"></ins><a href="http://artemfedorov.ru">Артем Федоров</a></li> </ul> <br><br><br><br><br><br><br><br><br> <ul id="menu2"> <li><a href="/c/1-Apache">Apache</a> <ul> <li><a href="/c/6-htaccess">htaccess</a> <ul> <li><a href="/c/7-mod_rewrite">mod_rewrite</a></li> </ul> </li> </ul> </li> <li><a href="/c/23-Авто">Авто</a> <ul> <li><a href="/c/25-Экслуатация">Экслуатация</a></li> <li><a href="/c/24-Ремонт">Ремонт</a></li> </ul> </li> <li><a href="/c/2-Кулинария">Кулинария</a> <ul> <li><a href="/c/18-Выпечка">Выпечка</a></li> <li><a href="/c/19-Мясные_блюда">Мясные блюда</a></li> <li><a href="/c/3-Салаты">Салаты</a></li> <li><a href="/c/5-Прохладительные_напитки">Прохладительные напитки</a></li> </ul> </li> <li><a href="/c/8-СУБД">СУБД</a> <ul> <li><a href="/c/9-MySQL">MySQL</a></li> </ul> </li> <li><a href="/c/31-Интернет">Интернет</a> <ul> <li><a href="/c/36-Блоги">Блоги</a></li> <li><a href="/c/45-Браузеры">Браузеры</a> <ul> <li><a href="/c/46-Firefox">Firefox</a></li> <li><a href="/c/47-Internet_Explorer">Internet Explorer</a></li> <li><a href="/c/48-Opera">Opera</a></li> <li><a href="/c/49-Safari">Safari</a></li> <li><a href="/c/50-Google_Chrome">Google Chrome</a></li> </ul> </li> <li><a href="/c/52-Поисковые_системы">Поисковые системы</a></li> <li><a href="/c/57-Социальные_сети">Социальные сети</a></li> </ul> </li> <li><a href="/c/10-Программирование">Программирование</a> <ul> <li><a href="/c/12-JavaScript">JavaScript</a> <ul> <li><a href="/c/39-Ajax">Ajax</a></li> <li><a href="/c/81-События">События</a></li> <li><a href="/c/97-Строки">Строки</a></li> </ul> </li> <li><a href="/c/11-PHP">PHP</a> <ul> <li><a href="/c/96-Дата_и_время">Дата и время</a></li> <li><a href="/c/16-Регулярные_выражения">Регулярные выражения</a></li> </ul> </li> </ul> </li> <li><a href="/c/13-Веб-дизайн">Веб-дизайн</a> <ul> <li><a href="/c/14-HTML">HTML</a> <ul> <li><a href="/c/62-Верстка">Верстка</a></li> </ul> </li> </ul> </li> </ul> </body></html>

CSS

CSS-файл dropdownmenu.css следующего содержания:

ul {margin:0; padding:0; list-style:none;} ul li {float:left; padding:5px 10px; background-color:#EEE; position:relative; white-space:nowrap;} ul li.hover {background-color:#DDD;} ul li ul {left:0; top:30px;} ul li ul li ul {top:0; left:100%;} ul li a.dd {background:url(down.gif) no-repeat right center; padding-right:13px;} ul li ul li a.dd {background:url(side.gif) no-repeat right center; padding-right:13px;} ul li li {float:none;} ul li.dd ul li a {background:none;} ul li ul {position:absolute;} ul ins {text-decoration:none;} /** * Вот это в принципе необязательно - это просто пример, * в исходном HTML-коде вы легко найдете, где удалить лишнее */ #vkontakte {background:url(vk.gif) no-repeat left center; padding-left:20px; text-decoration:underline;} #facebook {background:url(facebook.gif) no-repeat left center; padding-left:20px; text-decoration:underline;} #friendfeed {background:url(friendfeed.gif) no-repeat left center; padding-left:20px; text-decoration:underline;} #livejournal {background:url(livejournal.gif) no-repeat left center; padding-left:20px; text-decoration:underline;} #twitter {background:url(twitter.gif) no-repeat left center; padding-left:20px; text-decoration:underline;} #af {background:url(artem.gif) no-repeat left center; padding-left:20px; text-decoration:underline;}

JavaScript

И наконец JavaScript-файл dropdownmenu.js, следующего содержания:

/** * * Функция-класс для создания * * Если на странице будет одно выпадающее меню, то, вызываем так: * ddMenu(UL_ELEMENT_IDENTIFIER); // в качестве параметра передаем идентификатор главного тега UL * * Если на странице несколько выпадающих меню, то, вызываем так: * (new ddMenu(UL_ELEMENT_IDENTIFIER_1)); * (new ddMenu(UL_ELEMENT_IDENTIFIER_2)); * (new ddMenu(UL_ELEMENT_IDENTIFIER_X)); * * Примечание: * Когда используется несколько меню, могут возникнуть проблемы в браузере Internet Explorer 6 версии. * * Автор: Артем Федоров * */ function ddMenu(dropdownmenuid) { this.id = dropdownmenuid; this.mm = document.getElementById(this.id); this.zIndex = 1; this.closingTime = new Array(); this.closingTimeout = new Array(); this.init = function() { var mm, lis, i, y, ul, a; lis = this.mm.getElementsByTagName('li'); for (i = 0; i < lis.length; i++) { li = lis[i]; ul = false; a = false; for (y=0; y<li.childNodes.length; y++) { switch (li.childNodes[y].tagName) { case 'UL': ul = li.childNodes[y]; break; case 'INS': a = li.childNodes[y].firstChild; break; case 'A': a = li.childNodes[y]; break; default: break; } } if (ul) { a.className = 'dd'; ul.id = ul.id || this.id+'_'+i; this.closingTime[ul.id] = 0; ul.style.display = 'none'; ul.style.zIndex = 0; li.onmouseover = function(object, ul) { return function() { this.className = 'hover'; object.showMenu(ul); } }(this, ul) li.onmouseout = function(object, ul) { return function() { this.className = ''; object.closeMenu(ul); } }(this, ul) } else { li.onmouseover = function(){this.className = 'hover';} li.onmouseout = function(){this.className = '';} } } } this.showMenu = function(ul) { ul.style.display = 'block'; ul.style.zIndex = this.zIndex++; this.setClosingTime(ul); } this.setClosingTime = function(ul) { var cUl = ul; while (cUl.id != this.id) { this.closingTime[cUl.id] = 0; clearTimeout(this.closingTimeout[ul.id]); cUl = cUl.parentNode.parentNode; } } this.closeMenu = function(ul) { this.closingTime[ul.id]++; if (this.closingTime[ul.id] > 1) { this.closingTime[ul.id] = 0; clearTimeout(this.closingTimeout[ul.id]); ul.style.display = 'none'; ul.style.zIndex = 0; } else { this.closingTimeout[ul.id] = setTimeout(function(object, ul) { return function() { object.closeMenu(ul); } }(this, ul), 500); } } this.init(); }

Пример

Открываем HTML-файл dropdownmenu.html и на экране видим выпадающее меню.

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

Выпадающее меню 1
Выпадающее меню (JavaScript)

Выпадающее меню 2
Многоуровневое выпадающее меню (JavaScript)

Заключение

Когда используется несколько меню, могут возникнуть проблемы в браузере Internet Explorer 6 версии (проблема с таймерами). Грамотные JavaScript-программисты без труда смогут доработать скрипт под себя, а верстальщики изменить внешний вид выпадающего меню.

И еще раз ссылки на наглядный пример и архив с примером 5,30Кб.

Категории

ПрограммированиеJavaScript

Читайте также

Комментарии

S--O A--D

Отличный скрипт. Жаль что не кроссбраузерный.
В хроме во время загрузки страницы появляется выпадающее меню на доли секунды.

Ответить