В этом посте я покажу вам как сделать выпадающее меню ограничиваясь только средствами HTML и CSS, без использования скриптов. Источником сего примера является полезнейший ресурс CSSPlay. Те у кого этот сайт еще не нашел свое место в закладках, советую сделать это как можно быстрей. На сайте еще много различных и полезных примеров кода.
Приступим…
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
| <div class="menu">
<ul>
<li><a class="hide" href="">Раздел 1</a>
<!--[if lte IE 6]>
<a href="">Раздел 1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="">Раздел 2</a>
<!--[if lte IE 6]>
<a href="">Раздел 2
<table><tr><td>
<![endif]-->
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
<li><a href="" title="">Страница 2.4</a></li>
<li><a href="" title="">Страница 2.5</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div> |
Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в CSS ширину меню. Как вы видите в примере используются условные комментарии, с дополнительным кодом. Это необходимо для браузера IE6.
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
| .menu{
font-family:arial, sans-serif;
width:212px;
height:100px;
position:relative;
font-size:11px;
z-index:100
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#710069;
line-height:20px;
font-size:11px;
overflow:hidden
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#fff;
background:#36f
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li:hover ul li a:hover{
background:#6fc;
color:#000
} |
Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .menu ul li a.hide, .menu ul li a:visited.hide{
display:none
}
.menu ul li a:hover{
color:#fff;
background:#36f
}
.menu ul li a:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li a:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li a:hover ul li a:hover{
background:#6fc;
color:#000
} |
Вот собственно и все. Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа.
