HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Выпадающее меню на css

Посмотрим как легко сделать выпадающее меню без использования ява скрипта, только на css. Правда, для нашего любимого ИЕ6 скрипт всё-таки придется заюзать :)

Итак, сначала накидаем разметку для меню. Семантически это будут списки.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="menu">
    <li><a href="#">Главная</a></li>
    <li>
        <a href="#">О компании</a>
        <ul>
            <li><a href="#">История</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Состав</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Наши продукты</a>
        <ul>
            <li><a href="#">Колбаса</a></li>
            <li><a href="#">Мороженое</a></li>
            <li><a href="#">Арбузы</a></li>
            <li><a href="#">Апельсины</a></li>
            <li><a href="#">Мучные изделия</a></li>
        </ul>
    </li>
    <li><a href="#">Контактная информация</a></li>
</ul>

Теперь стили:

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

#menu{
    list-style:none;
    padding:0;
    margin:0;
}
#menu li{
    float:left;
    height:20px;
    padding:0;
    margin:0;
    width:150px;
    text-align:center;
    background:#0CF;
    position:relative;
}
#menu li ul{
    list-style:none;
    padding:0;
    margin:0;
    width:150px;
    position:absolute;
    left:0;
    top:20px;
    display:none;
}
#menu li ul li{
    float:none;
    height:20px;
    margin:0;
    width:150px;
    text-align:center;
    background:#0CF;
}
#menu li a{
    display:block;
    width:150px;
    height:20px;
}
#menu li:hover ul{
    display:block;  
}
#menu li:hover{
    background:#F00;
}

Итак, как вы видите из css, основное «движение» меню идет с помощью навешивания hover на элемент списка li. Т.е. при наведении мышки на тег ли мы показываем внутренний список меню (display:block). До этого мы его скрывали (display:none)

Было бы всё хорошо, но ИЕ6 понимает hover только для ссылки, т.е. тега <а>. Для этого придется использовать скрипт, который к каждому тегу <li> при наведении будет добавлять класс jshover. При помощи этого скрипта и совсем мало видоизмененного 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
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Выпадающее меню на css</title>
    <style>
		#menu{
			list-style:none;
			padding:0;
			margin:0;
		}
		#menu li{
			float:left;
			height:20px;
			padding:0;
			margin:0;
			width:150px;
			text-align:center;
			background:#0CF;
			position:relative;
		}
		#menu li ul{
			list-style:none;
			padding:0;
			margin:0;
			width:150px;
			display:none;
			position:absolute;
			left:0;
			top:20px;
		}
		#menu li ul li{
			float:none;
			height:20px;
			margin:0;
			width:150px;
			text-align:center;
			background:#0CF;
		}
		#menu li a{
			display:block;
			width:150px;
			height:20px;
		}
		#menu li:hover ul, #menu li.jshover ul{
			display:block;  
		}
		#menu li:hover, #menu li.jshover{
			background:#F00  
		}
    </style>
    <script>
		jsHover = function() {
		var hEls = document.getElementById("menu").getElementsByTagName("li");
		for (var i=0, len=hEls.length; i<len; i++) {
		hEls[i].onmouseover=function() { this.className+=" jshover"; }
		hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
		}
		}
		if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
    </script>
</head>
<body>
    <ul id="menu">
        <li><a href="#">Главная</a></li>
        <li>
            <a href="#">О компании</a>
            <ul>
                <li><a href="#">История</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Состав</a></li>
            </ul>
        </li>
            <li>
            <a href="#">Наши продукты</a>
            <ul>
                <li><a href="#">Колбаса</a></li>
                <li><a href="#">Мороженое</a></li>
                <li><a href="#">Арбузы</a></li>
                <li><a href="#">Апельсины</a></li>
                <li><a href="#">Мучные изделия</a></li>
            </ul>
        </li>
        <li><a href="#">Контакты</a></li>
    </ul>
</body>
</html>

Метки: ,

Запись опубликована 03.07.2009 в 13:01 и размещена в рубрике css, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (14) на “Выпадающее меню на css”

  • Alex:
    24.07.2009 в 23:25

    Живой пример бы не помешал в данном случае…

  • Дмитрий:
    24.09.2009 в 20:07

    У меня пример не работает в шестом. Проверил в IETester и Multiple IE. А так во всем остальном работает.

  • Костя:
    24.09.2009 в 20:26

    Дмитрий, очень странно. Скопировал последний листинг кода в дримвивер, сохранил, в иетестере и мультипле ие всё работает.

  • Эдуард:
    09.11.2009 в 05:35

    Это от того что в последнем листинге есть стили для класса .jshover, а в предыдущем нету.

  • Стас:
    29.01.2010 в 10:31

    У меня не корректно работает это меню…вообще. В хроме, мозилле и опере глюки

  • Александр Прошкин:
    17.03.2010 в 02:10

    вот эта строка лишняя похоже автор у америкосов скатал, да забыл что они кириллицу не понимают! Все равно автору спасибо простенькое меню для сайта

  • Александр Прошкин:
    17.03.2010 в 02:11

    meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″

  • Андрей:
    18.06.2010 в 10:48

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

  • Кирилл:
    16.09.2010 в 22:44

    Всем привет! Пдскажите пожалуйста, как добавить 3-й уровень подменю в данный код!

  • goodvina:
    10.01.2011 в 14:57

    А подскажите новичку, куда вставлять все эти файлы на сайт? — разметку, стили? Изначально у меня на сайте верстка табличная, как это с css срастить?

  • pl:
    05.04.2011 в 15:42

    Просто при наведении подсвечивается пункт меню это не прикольно.
    надо ж чтоб был виден активный пункт меню.
    кого интересует как сделать без java я тут нашел http://phpcss.ru

  • Igor:
    29.04.2011 в 01:09

    Для начинающих хороший урок. У меня все заработало и в IE и в мозиле. А то, что меню простое, ну а какое оно должно быть в уроке :)

  • Андрей:
    16.10.2011 в 11:21

    Есть интересный вариант (но с JavaScript) на http://sitemaker.x10.bz/downloads.php?id=19

  • Андрей:
    28.10.2011 в 15:03

    Есть интересный вариант (но с JavaScript) на http://sitemaker.x10.bz/articles.php?id=10 (предыдущая ссылка не работает)

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос