Многоуровневое выпадающее меню (JavaScript) Вступление Выпадающее меню можно сделать используя один лишь CSS, но, проблема как всегда в браузере Internet Explorer, который умеет обрабатывать событие hover только в теге <A>Кто не любит читать статьи, предлагаю сразу или 5,30Кб. Что понадобится HTML-файл, CSS-файл, JavaScript-файл и маркированный список, который будет в виде древовидной структуры (последовательности выпадающего меню). HTML Создаем файл dropdownmenu.html следующего содержания:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124<!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>
Оглавление скрыть Вы можете через ВКонтакте, Фейсбук и
Многоуровневое выпадающее меню (JavaScript+CSS) Представьтесь пожалуйстаВведите имя пользователя и пароль указанные при .Электронная почта:Пароль:Запомнить учетную запись
Комментариев нет:
Отправить комментарий