Javascript древовидное выпадающее меню
Теги:
Меня попросили написать скрипт выпадающего древовидного меню.
Меню полностью кроссбраузерное, семантически правильное, может содержать неограниченное количество вложений. Меню включает в себя немножко стилей, сам код списка и небольшой управляющий скриптик. Для установки достаточно скопировать к себе на сайт код меню, который указан в конце этого поста.
По желанию ещё можно изменить картинки плюса и минуса, которые использовал я. В виде бонуса, можете скачать ещё несколько изображений плюсов и минусов других цветов (их рисовал я для этой менюшки). Меню проверено и полностью работоспособно в IE, Opera, Mozilla, Safari.
А вот код, который необходимо вставить к себе на сайт (это код приведенного выше примера - изменяйте под себя):
<style type="text/css">
#dropMenu, #dropMenu ul {list-style:none;margin:0px;padding:0px;}
.menuCat {background:url(http://studioad.ru/works/signs/plus.gif) 0px 3px no-repeat;padding-left:12px;}
.menuCat span {cursor:pointer;font-weight:bold;}
.menuCat ul {display:none;}
</style>
<ul id="dropMenu">
<li><a href="http://studioad.ru">Главная страница AD</a></li>
<li class="menuCat"><span>Другие разделы студии</span>
<ul>
<li><a href="http://studioad.ru/index/0-2">Услуги студии</a></li>
<li><a href="http://studioad.ru/index/0-6">Цены на услуги</a></li>
<li><a href="http://studioad.ru/index/0-3">Контакты с дизайнером</a></li>
</ul>
</li>
<li class="menuCat"><span>Блог AD</span>
<ul>
<li><a href="http://studioad.ru/blog">Главная страница блога</a></li>
<li class="menuCat"><span>Скрипты и разработки</span>
<ul>
<li><a href="http://studioad.ru/blog/2009-02-06-28">Скрипт рейтинга</a></li>
<li><a href="http://studioad.ru/blog/2009-02-12-32">Посветка js синтаксиса</a></li>
<li><a href="http://studioad.ru/blog/2009-02-18-41">Проверка сложности пароля</a></li>
<li><a href="http://studioad.ru/blog/2009-02-03-26">Прокрутка textarea</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://studioad.ru/index/0-9">Галерея AD</a></li>
</ul>
<script type="text/javascript">
// Made by Aleko (http://studioad.ru)
plus="http://studioad.ru/works/signs/plus.gif"; // plus image folder
minus="http://studioad.ru/works/signs/minus.gif"; // minus image folder
dropMenu();function dropMenu(){var c,d,e,j,i;c=new Array();d=document.getElementsByTagName('*');e=new RegExp("(^|\\b)menuCat(\\b|$)");j=0;for(i=0;i<d.length;i++){if(e.test(d[i].className)){c[j]=d[i];j++}}for(i=0;i<c.length;i++){var f=c[i].getElementsByTagName("span")[0];f.onclick=function(){var a,b;a=this.parentNode;b=a.getElementsByTagName("ul")[0];if(b.style.display=="block"){a.style.backgroundImage="url("+plus+")";b.style.display="none"}else{a.style.backgroundImage="url("+minus+")";b.style.display="block"}}}};
</script>
<!-- /древовидное меню -->
Бонус - пак разноцветных плюсов и минусов Жду комментариев!
