В данной статье я расскажу как сделать вертикальное выпадающее меню с использованием CSS и JavaScript. Разметка основана на маркированных списках и поддерживает один уровень вложенности. Вложенное меню с помощью CSS трансформируется в выпадающее меню, появляющееся при событии onmouseover. Интерфейс меню стилизован во внешнем файле стилей. Изображение стрелки появляется автоматически, когда у пункта меню есть подразделы.
Читайте также: Горизонтальное выпадающее меню
Пример
Инструкция по установке
Шаг 1: добавьте следующий код в секцию <head> Вашего HTML файла:
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />
<script type="text/javascript" src="cssverticalmenu.js">
/***********************************************
* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
В нем содержатся ссылки на два внешних файла и 3 картинки. Скачайте их (правый клик и выберите "Сохранить как"):
- cssverticalmenu.css
- cssverticalmenu.js
- Три картики (отресайзенные):
Шаг 2: Добавьте следующий HTML код, в котором и содержится само меню:
<ul id="verticalmenu" class="glossymenu">
<li><a href="#">JavaScript Kit</a></li>
<li><a href="#">Free JavaScripts</a></li>
<li><a href="#">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="#">JavaScript Reference</a></li>
<li><a href="#">DOM Reference</a></li>
<li><a href="#">CSS Reference</a></li>
</ul>
</li>
<li><a href="#">DHTML/ CSS Tutorials</a></li>
<li><a href="#">web Design Tutorials</a></li>
<li><a href="#">Helpful Resources</a>
<ul>
<li><a href="#">Dynamic HTML</a></li>
<li><a href="#">Coding Forums</a></li>
<li><a href="#">CSS Drive</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Image Optimizer</a></li>
<li><a href="#">Favicon Generator</a></li>
</ul>
</li>
</ul>
Вот и все! Вы можете «тюнинговать» механизм меню, редактируя файл cssverticalmenu.js
@ 11 Декабря 2007 в 18:07
Вопрос тот же что и в предыдущем посте.
Кстати, почему у вас название блога не кликабельно? Как перейти на главную страницу блога? Через URL? :)
@ 11 Декабря 2007 в 21:25
Спасибо за дельное замечание, сделал в меню пункт «Главная страница». Вообще сайт сейчас потихоньку совершенствуется и обрастает функционалом, сейчас например работаю над новым дизайном. Критику и пожелания Вы можете посылать на ящик editor(собачка)webmagazine.biz.
@ 29 Марта 2008 в 11:57
Хорошее меню. А как поменять цвет шрифта в меню?
@ 31 Марта 2008 в 16:36
Все это прикольно конечно, но мне вот например, нужно выпадающее меню без скрипта! вы б уже дописывали что выпадающее меню с помощью css + JavaScript!
@ 15 Апреля 2008 в 21:53
Меню поддерживает одно вложение. А как сделать более глубокое? Пробую сделать что б из вложения открылось еще одно вложение,но оно накладывается на своего "родителя". Игрался с css - не получается ничего...
@ 12 Мая 2008 в 19:14
2 Larisa: Цвет вы можете поменять в css файле, замените значение у color.
2 Tasha: В самом начале написано: "я расскажу как сделать вертикальное выпадающее меню с использованием CSS и JavaScript". Читайте внимательнее!
2 Максим: Никогда не делаю выпадающее меню больше 3 уровней, пользователю тяжело ориентироваться, если же Вам это все таки необходимо, то могу посоветовать:
1) После тега <a> у пункта второго уровня вставляете третий уровень:
<ul><li><a href="#">Третий уровень 1</a></li>
<li><a href="#">Третий уровень 2</a></li>
</ul>
2) Надо подправить css для стилизации третьего уровня
3) Скорее всего понадобится модифицировать файл js, я не уверен, что он поддерживает третий уровень.
2 Для всех: У меня в почте спрашивали:
"Я поменял дизайн меню под свой сайт, все работает.
Но на сайте планируется больше 100 страниц. А редактировать меню на каждой - как-то не очень удобно.
В комментариях я чилал, что можно вынести меню в отдельный JS файл - но я не понял как."
Вы не можете вынести меню во внешний файл, это же html код, для того чтобы у Вас можно было добавлять и удалять разделы, надо воспользоваться языком PHP. У меня для этого используется CMS EditZone, Вы же можете на каждой странице просто подключать в область для вывода меню код:
<?php@include_once('menu.php');
?>
Ну а в самом файле уже выводить пункты меню через echo или print.