Создаем вертикальное выпадающее меню при помощи CSS

В данной статье я расскажу как сделать вертикальное выпадающее меню с использованием 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 картинки. Скачайте их (правый клик и выберите "Сохранить как"):

Шаг 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

Поделись с друзьями:
Комментарии

Вопрос тот же что и в предыдущем посте.

Кстати, почему у вас название сайта не кликабельно? Как перейти на главную страницу? Через URL? :)

Спасибо за дельное замечание, сделал логотип кликабельным. Вообще сайт сейчас потихоньку совершенствуется и обрастает функционалом, сейчас работаю над новым дизайном. Критику и пожелания Вы можете посылать на ящик admin(собачка)webdev.ru.

Хорошее меню. А как поменять цвет шрифта в меню?

Меню поддерживает одно вложение. А как сделать более глубокое? Пробую сделать что б из вложения открылось еще одно вложение,но оно накладывается на своего "родителя". Игрался с css - не получается ничего...

2 Larisa:
Цвет вы можете поменять в css файле, замените значение у color.

2 Максим:
Никогда не делаю выпадающее меню больше 3 уровней, пользователю тяжело ориентироваться, если же Вам это все таки необходимо, то могу посоветовать:
1) После тега <a> у пункта второго уровня вставляете третий уровень:

<ul>
    <li><a href="#">Третий уровень 1</a></li>
    <li><a href="#">Третий уровень 2</a></li>
</ul>

2) Надо подправить css для стилизации третьего уровня
3) Скорее всего понадобится модифицировать файл js, я не уверен, что он поддерживает третий уровень.

2 all: У меня в почте спрашивали:

Я поменял дизайн меню под свой сайт, все работает.
Но на сайте планируется больше 100 страниц. А редактировать меню на каждой - как-то не очень удобно.

Вы не можете вынести меню во внешний файл, это же html код, для того чтобы у Вас можно было добавлять и удалять разделы, надо воспользоваться языком PHP. Вы можете на каждой странице просто подключать в область для вывода меню код:

<?php
    @include_once('menu.php');
?>

Ну а в самом файле уже выводить пункты меню через echo или print.

Можно както сделать чтоб второй уровень держался определенное время и закрывался? А не только чтобы его держание открытым зависело от нахождение мышки на ссылке. А то на IЕ возникли проблемы. Некоторые не успевают переместится на нужную ссылку, жалуются что быстро закрывается второй уровень. Помогите подскажите что делать?

У меня работает меню в ИЕ, но вот в опере почему-то выскакивает не вбок а вниз, не подскажете что делать?

Большое спасибо автору! Переделал под себя теперь чёрное выпадающее меня выглядит намного эффектнее зелёного!

О-о-о-очень долго подстраивал под свой сайт. В итоге в Опере оно работает совсем не так как надо. Для ИЕ пойдёт, но Опера то лучше и большая часть пользователей через неё ходит по сети. Пришлось распрощаться с этим css.

R 13, а DOCTYPE небось забыл прописать правильный, вот и глючит. Посмотри пример Mike, у меня в опере 9.25 работает. К тому же кто сказал что в опере большинство посетителей? Бред полный. IE6+IE7 - большинство, потом Mozilla Firefox, а потом уже только Опера идет, по посещаемости. Это статистика не одного моего сайта.

Аватар пользователя Александр

R13, по поводу Оперы:
Кури статистику по использованию браузеров. До сих пор ИЕ наверное процентов 50 используют. А Опера процентов 10 если наберет, то уже хорошо. В первую очередь настраивается под ИЕ. Потому как он самый кривой и тупой, имхо. А если уж настроил для ИЕ, то под Оперу проще.

Всё прекрасно работает. И в IE, и в Мозиле, и в Опере. Были небольшие проблемы с IE, но убрав рисунок из строчки в стилях, прописал просто фоновый цвет, всё стало на свои места.
И всё же есть одно НО - меню перекрывается всякого рода объектами (флеш, видео-плеерами).
Может есть решение этой проблемки? Уж больно не хочется отказываться от этого меню.

Подскажите пожалуйста как сделать так, чтобы второй уровень меню начинался каждый раз сверху, при наведение на любую вкладку первого уровня меню?

Вот JS для 3х уровней:

$(document).ready(function(){
 $("ul.dropdown li").hover
 
 (function(){
   $(this).addClass("hover");
   $('> .dir',this).addClass("open");
   $('ul:first',this).css('visibility', 'visible');
 },
 function(){
   $(this).removeClass("hover");
   $('.open',this).removeClass("open");
   $('ul:first',this).css('visibility', 'hidden');
 });

});

Вот для 2х уровней:

function startMenu() {
 // Проверяем, поддерживает ли текущий браузер DOM
 if (document.getElementById) {

   // Получаем объект с именем идентификатора menu
   nav = document.getElementById('menu');

   // Пробегаемся по всем дочерним элементам нашего меню
   for (i=0; i<nav.childNodes.length; i++) {
     node = nav.childNodes[i];

     // Если дочерний элемент - LI, то идем дальше
     if (node.nodeName == 'LI') {

       // При наведении курсора на пункт меню, присваиваем LI класс over
       node.onmouseover = function() {
         this.className = 'over';
       }
       node.onmouseout = function() {

         // При перемещении курсора за пределы пункта убираем класс over
         this.className = '';
       }
     }
   }
 }
}

У меня тоже в ie7 не работает что делать? кто знает? help

Здравствуйте, автор статьи, у меня есть к вам вопрос как к знатоку выпадающих меню. Скажите, пожалуйста, если знаете, как можно настроить перенос слов в пунктах меню, если они выходят за пределы отведенного для них места.

Как сделать так что бы слишком длинное меню не выходило за пределы страницы, а например располагалось в несколько рядов.

Вот например на Ucoz-е на всех страницах меню прекрасно пашет, а на страницах, созданных вручную (т.е. просто доп. страницы на сайте) меню не пашет. Вместо меню просто текст со ссылками и все. Помогите пожалуйста!

Arizona, на страницах созданных вручную пропиши правильный путь к стилям.