Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


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

Вступление

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

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

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

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

HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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 следующего содержания:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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, следующего содержания:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
 *
 * Функция-класс для создания
 *
 * Если на странице будет одно выпадающее меню, то, вызываем так:
 *   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Кб.

Опубликовано: 02 июня 2011  ·  Автор: Артём Фёдоров  ·  10829 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptМногоуровневое выпадающее меню (JavaScript)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Отличный скрипт. Жаль что не кроссбраузерный.
В хроме во время загрузки страницы появляется выпадающее меню на доли секунды.
S--O A--D · 4 года назад
JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания