Sub-Menu com 3 níveis com CSS
Primeira coisa é criar o html, e com isso iremos utilizar uma lista não ordenada, porque o menu nada mais é do que uma lista de links. Mas nesse caso, quando quero informar que queremos um nível depois, temos que colocar outra lista dentro no elemento, e assim sucessivamente. Parece complicado não? Mas não é tanto assim, vocês irão ver:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <ul id= "menu" > <li><a href= "#" >Home</a></li> <li><a href= "#" >Serviços</a> <ul> <li><a href= "#" >Web</a></li> <li><a href= "#" >SEO</a></li> <li><a href= "#" >Gráfico</a> <ul> <li><a href= "#" >Cartão</a></li> <li><a href= "#" >Panfleto</a></li> <li><a href= "#" >Banner</a></li> </ul> </li> </ul> </li> <li><a href= "#" >Produtos</a></li> <li><a href= "#" >Contato</a></li> </ul> |
Depois de criar a nossa lista, vamos começar a brincadeira, que a sua estilização, criar um novo arquivo, e dê o nome de estilo.css, e link para sua página. Aconselho a criar uma pasta para colocar o arquivo css, dê o nome de css:
1
| < link href = "css/estilo.css" rel = "stylesheet" type = "text/css" /> |
1
2
3
4
5
6
7
8
9
10
11
12
13
| /******************************* *CONFIGURAÇÕES GENÉRICAS ********************************/ *{ margin : 0 ; padding : 0 ; } ul{ list-style-type : none } a{ text-decoration : none } a:hover{ text-decoration : underline } |
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
| /******************************* *CONFIGURAÇÕES MENU - Estilização ********************************/ #menu{ width : 150px ; /*define uma largura*/ } #menu li{ position : relative ; /*define a posição relativa,importante para limitar, porque usaremoso absolute*/ } #menu li a{ display : block ; /*define o elemento em bloco para ocupar 100% de largura do elemento pai*/ height : 25px ; /*Define uma altura*/ line-height : 25px ; /*Cenraliza na vertical */ color : #777 ; /*define a cor da fonte*/ border-bottom : 1px solid #ccc ; /*define uma bordar no bottom*/ background : #f5f5f5 ; /*define a cor do fundo*/ #menu li a:hover{ background : #e5e5e5 ; /*define a cor do fundo*/ color : #333 ; /*define a cor da fonte*/ } |
Agora vamos começar o efeito, o que queremos? Que as sub-listas não apareçam por padrão e ao passar o mouse na lista, ele apareça.
1
2
3
4
5
6
7
8
9
| #menu li ul{ display : none ; /*define para não aparecer a ul*/ position : absolute ; /*define uma posição absolute*/ width : 150px ; /*define uma largura*/ top : 0 ; /*colocamos top com 0*/ left : 149px ; /*afastamos para esquerda 149px, 1px a menos do que largura da ul*/ } |
1
2
3
| #menu li:hover ul{ display : block ; } |
1
| #menu li:hover ul ul{ display : none } |
1
| #menu ul li:hover ul{ display : block ;} |
1
2
3
4
5
6
7
8
| $(document).ready( function (){ $( "#menu li" ).hover( function (){ $( this ).find( 'ul:first' ).css( 'display' , 'block' ); }, function (){ $( this ).find( 'ul:first' ).css( 'display' , 'none' ); }); }); |
Mas se você reparar também dará outro problema no IE6(nem sei por que estou ensinando a consertar nesse negócio), fica um espaço ao passar o mouse, para isso basta colocar um hack na li, e coloco float:left
1
| #menu li{ _float : left } |
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" /> < title ></ title > < link href = "css/estilo.css" rel = "stylesheet" type = "text/css" /> </ head > < body > < ul id = "menu" > < li >< a href = "#" >Home</ a ></ li > < li >< a href = "#" >Serviços</ a > < ul > < li >< a href = "#" >Web</ a ></ li > < li >< a href = "#" >SEO</ a ></ li > < li >< a href = "#" >Gráfico</ a > < ul > < li >< a href = "#" >Cartão</ a ></ li > < li >< a href = "#" >Panfleto</ a ></ li > < li >< a href = "#" >Banner</ a ></ li > </ ul > </ li > </ ul > </ li > < li >< a href = "#" >Produtos</ a ></ li > < li >< a href = "#" >Contato</ a ></ li > </ ul > < script type = "text/javascript" > $(document).ready(function(){ $("#menu li").hover(function(){ $(this).find('ul:first').css('display', 'block'); }, function(){ $(this).find('ul:first').css('display', 'none'); }); }); </ script > </ body > </ 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
| *{ margin : 0 ; padding : 0 ; } ul{ list-style-type : none } a{ text-decoration : none } a:hover{ text-decoration : underline } #menu{ width : 150px } #menu li{ position : relative ; _float : left } #menu li a{ display : block ; height : 25px ; line-height : 25px ; color : #777 ; border-bottom : 1px solid #ccc ; background : #f5f5f5 ; } #menu li a:hover{ background : #e5e5e5 ; color : #333 ; } #menu li ul, #menu li:hover ul ul{ display : none ; position : absolute ; width : 150px ; top : 0 ; left : 149px ; } #menu li:hover ul, #menu ul li:hover ul{ display : block ; } |
Download
fonte:
davidchc