Menu retrátil em javascript e css

Publicado em 18 de abril de 2012 by derme| 2 Comentários

Menu retrátil javascript - dicas de javascript para sites e blogsEsse é um pequeno tutorial para criação de um menu retrátil com o uso de uma pequena função javascript e código css , que é bastante útil sobretudo quando você tem pouco espaço vertical no seu blog ou site.

O menu será montado com estrutura em listas e sub-listas html e terá a opção para ocultar o sub-menu exibido anteriormente a cada novo sub-menu que seja exibido ou deixar os sub-menus exibidos anteriormente visíveis.

Vamos inicialmente ao nosso código javascript:

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

<script language="JavaScript">

function mostra_item(n){

// valor "e" esconde os submenus anteriores

// valor "m" deixar visível os submenus anteriores

op="e"

var x=document.getElementsByName("x");
n_itens=x.length;

if(op=="e"){

for (i=1;i<=n_itens;i++){
if (i!=n){
document.getElementById(i).style.display="none";
}
}
document.getElementById(n).style.display="table";

}else if(op=="m"){
document.getElementById(n).style.display="table";
}
}

</script>

A primeira coisa importante a ser observada nessa função é o código “DOM” getElementsByName com ele é possível manipular um grupo de elementos com o mesmo valor para o atributo “name” isso será importante porque precisarei do número total de sub-menus presentes no nosso menu, e usando essa técnica, poderei atribuir um nome igual para todos os sub-menus e usando javascript para encontrar o total de sub-menus; de outra forma teria que atribuir esse número manualmente na função javascript e toda vez que fosse introduzido um novo sub-menu esse número teria que ser atualizado.

Observe a variável “op” que será usada na condicional que irá decidir se quando um novo sub-menu for exibido o anterior será oculto ou não.

Caso a opção seja “e” irá ocultar o anterior, nesse caso é colocado um loop for que irá passar por todos os submenus ocultando-os, inclusivo o que queremos mostrar e em seguida exibiremos exatamente esse que queremos que fique visível.

Se a opção for deixar o anterior visível a instrução será mais simples, apenas de exibir cada um, que é passado no contador “i” do loop, pois coincidirá com as IDs dos sub-menus que veremos mais adiante.

Agora vamos a nossa 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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

<style type='text/css'>

/* |||||| CONFIGURAÇÃO DO MENU |||||| */

/*
ESTRUTURA DO MENU EXPANSÃVEL
*/
a.titulos:link,a.titulos:visited{
height:auto;
width:150px;
padding:3px 7px;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:verdana;
background-color:#fab514;
display: table;
text-decoration:none;
font-weight:bold;
text-align:left;
}
a.titulos:hover{
height:auto;
width:width:150px;
padding:3px 7px;
background-image: -moz-linear-gradient(100% 100% 90deg, #ffcc00,#ffff00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffff00), to(#ffcc00));
text-shadow: 0 -1px 1px #a3a3a3;
color: #ff6600;
font-family:verdana;
background-color:#fab514;
display: table;
text-decoration:none;
font-weight:bold;
text-align:center;
}
ul.titulos{border:4px groove #ff9900;display:table;padding-left:0px;background-color:#ffcc00}
li.titulos{
list-style-type: none;
border-bottom:1px solid #ffcc00;
border-top:1px solid #ffcc66;
padding:0px;
width:165px;
}

/*
ESTRUTURA DO SUBMENU EXPANSÃVEL
*/
a.itens:link,a.itens:visited{
height:auto;
width:140px;
padding:3px 7px;
background-image: -moz-linear-gradient(100% 100% 90deg, #ffcc00,#ffff33);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffff33), to(#ffcc00));
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #000000;
font-family:verdana;
background-color:#fab514;
display: table;
text-decoration:none;
font-weight:bold;
text-align:left;
}
a.itens:hover{
height:auto;
width:width:165px;
padding:3px 7px;
background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
text-shadow: 0 -1px 1px #a3a3a3;
color: #ffffff;
font-family:verdana;
background-color:#fab514;
display: table;
text-decoration:none;
font-weight:bold;
text-align:center;
}
ul.itens{border:0px groove #ff9900;display:none;padding-left:0px;}
li.itens{
list-style-type: none;
border-bottom:1px solid #ffcc00;
border-top:1px solid #ffcc66;
padding-left:5px;
margin-left:5px;
padding-right:0px
width:165px;

}
</style>

São dois grupos de códigos distintos, um somente para o menu e outro só para os sub-menus, eles mantem praticamente o mesmo padrão, só mudando as cores quando o mouse passa por cima e em estado normal. E outra coisa que muda é o alinhamento para que o sub-menu fique à direita.

Agora o código html:

IMPORTANTE: você não pode esquecer de colocar a declaração para HTML 5 <!DOCTYPE html> antes da tag <html< para funcionar no IE.

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

<ul class="titulos">

<li class="titulos"><a href="#" class="titulos" onmouseover="mostra_item('1')" >Quem Somos</a></li>
<ul class="itens" id="1" name="x">
<li class="itens"><a href="#" class="itens" >Item 1A</a></li>
<li class="itens"><a href="#" class="itens">Item 2A</a></li>
<li class="itens"><a href="#" class="itens">Item 3A</a></li>
</ul>

<li class="titulos"><a href="#" class="titulos" onmouseover="mostra_item('2')" >Produtos</a></li>
<ul class="itens" id="2" name="x">
<li class="itens"><a href="#" class="itens" >Item 1B</a></li>
<li class="itens"><a href="#" class="itens">Item 2B</a></li>
<li class="itens"><a href="#" class="itens">Item 3B</a></li>
</ul>

<li class="titulos"><a href="#" class="titulos" onmouseover="mostra_item('3')" >Serviços</a></li>
<ul class="itens" id="3" name="x">
<li class="itens"><a href="#" class="itens" >Item 1C</a></li>
<li class="itens"><a href="#" class="itens">Item 2C</a></li>
<li class="itens"><a href="#" class="itens">Item 3C</a></li>
</ul>

</ul>

Observe agora nos links dos títulos das categorias a função mostra_item(’1′) chamada no evento onmouseover é preciso ter o cuidado de atribuir números em sequencia  para cada submenu para que o menu funcione corretamente.

Obs: os efeitos gradientes do css3 não aparecem no Internet Explore.

Até a próxima.
Postado em javascript and tagged , . Link permenente.

2 Respostas para Menu retrátil em javascript e css

  1. Elcio | 16 de setembro de 2012 at 14:15 | Responder

    Olá, estou com dificuldades para criar um menu com submenus.
    O meu menu tem como exemplo : (menu) Livro e (submenu)Administração. (menu) CDs e (submenu) Rock.
    O menu Livro e Cds na página principal aperecem com os submenus.
    Meu objetivo seria ao clicar em Livros por exemplo, o menu CDs ficasse oculto, mostrando apenas Livros(menu) e Administração(submenu). E ao clicar no Logotipo da página principal, voltasse ao menu inicial com Cds novamente.

    Estou usando o Visual Studio 2010. Sou iniciante ainda, e estou desenvolvendo este programa como exemplo.
    Grato pela atenção, Elcio.

  2. derme | 16 de setembro de 2012 at 14:34 | Responder

    Olá Elcio,

    Desculpe mas não tenho conhecimento nenhum no Visual Studio.

    Abraço.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>