A web não vive sem navegação. Aliás, navegar é o que se faz na web e sem um sistema de navegação intuitivo o utilizador perde-se neste infinito oceano.
Apesar dos elevados recursos que hoje temos, cada designer procura que a sua página seja o mais leve possível de forma a que os tempos de espera, por parte do utilizador, nem sequer existam. E é aí que o css3 tem uma enorme vantagem sobre outras linguagens. Cada vez mais vemos coisas fantásticas e simples a serem feitas com estas duas linguagens em conjunto html e css.
Pois bem, este tutorial mostra como fazer um sistema de navegação simples, mas com dropdown menus. Para aqueles que procuram ter mais que um nível de navegação num só menu.
Vamos apresentar o menu na horizontal e na vertical, se bem que o html em ambos é o mesmo, só são alteradas algumas configurações no css.
Código HTML:
<nav id=”navega”>
<ul>
<li class=”azul”>
<a href=”#”>Inicio</a>
<ul>
<li><a href=”#”>Subitem 1</a></li>
<li><a href=”#”>Subitem 2</a></li>
</ul>
</li>
</ul>
Cada menu (inicio, quem somos, contactos, etc.) é inserido numa <li></li>. Neste caso, a cada um, e de forma a podermos formatar separadamente, atribuimos uma classe (azul, laranja, etc.). Cada submenu estará dentro da <li> anterior configurado pelas tags <ul> <li></li></ul>, sendo que cada <li> criada corresponde a um submenu. Podemos assim criar tantos itens quantos pretendermos. Assim, para 4 menus com um submenu de dois links cada um, ficaríamos com o código seguinte:
Código HTML completo:
<body>
<nav id=”navega”>
<ul>
<li class=”azul”>
<a href=”#”>Inicio</a>
<ul>
<li><a href=”#”>Subitem 1</a></li>
<li><a href=”#”>Subitem 2</a></li>
</ul>
</li>
<li class=”laranja”>
<a href=”#”>Quem sou</a>
<ul>
<li><a href=”#”>Subitem 1</a></li>
<li><a href=”#”>Subitem 2</a></li>
</ul>
</li>
<li>
<a href=”#”>Trabalhos</a>
<ul>
<li><a href=”#”>Subitem 1</a></li>
<li><a href=”#”>Subitem 2</a></li>
</ul>
</li>
<li class=”verde”>
<a href=”#”>Contacto</a>
<ul>
<li><a href=”#”>Subitem 1</a></li>
<li><a href=”#”>Subitem 2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
Vai ser o código css a fazer toda a magia. O css3 continua o seu progresso e existem pequenas dicas que deixam qualquer designer deslumbrado.
O código CSS:
#navega > ul{
width: 700px;
margin:0 auto;
}
O menu no seu todo tem o ID navega, ao qual atribuímos uma largura de 700px para não ocupar todo o ecrã. Este valor terá se der alterado tendo em conta as dimensões da página criada.
Para configurar cada item do menu utilizámos as seguintes propriedades:
#navega > ul > li{
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
padding: 25px;
}
O texto de cada item do menu tem as seguintes propriedades:
#navega > ul > li > a{
color:#FFF;
text-decoration:none !important;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:16px;
}
Para os submenus utilizámos as seguintes propriedades:
#navega li ul{
position:absolute;
list-style:none;
text-align:center;
width:100px;
left:50%;
margin-left:-90px;
top:50px;
font:bold 12px ‘Open Sans Condensed’, sans-serif;
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#navega li:hover ul{
max-height:200px;
}
#navega li ul li{
background-color:#313131;
}
#navega li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#navega li ul li:nth-child(odd){
background-color:#363636;
}
#navega li ul li:hover{
background-color:#444;
}
#navega li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#navega li ul li:first-child:before{
content:”;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
#navega li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#navega li.azul{
background-color:#1caabb;
color:##FFF;
}
#navega li.laranja{
background-color:#ef9c64;
color:##FFF;
}
#navega li.roxo{
background-color:#a78be1;
color:##FFF;
}
#navega li.verde{
background-color:#5abd5a;
color:##FFF;
}
Uma chamada de atenção para o seguinte trecho de código:
#navega li ul li:first-child:before{
content:”;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
Assim se cria o pequeno triangulo no topo do submenu. No caso do menu ser vertical terá de sofrer alterações.
O código CSS final para o menu horizontal:
@charset “utf-8″;
#navega > ul{
width: 700px;
margin:0 auto;
}
#navega > ul > li{
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
padding: 25px;
}
#navega > ul > li > a{
color:#FFF;
text-decoration:none !important;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:16px;
}
#navega li ul{
position:absolute;
list-style:none;
text-align:center;
width:100px;
left:50%;
margin-left:-90px;
top:50px;
font:bold 12px ‘Open Sans Condensed’, sans-serif;
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#navega li:hover ul{
max-height:200px;
}
#navega li ul li{
background-color:#313131;
}
#navega li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#navega li ul li:nth-child(odd){
background-color:#363636;
}
#navega li ul li:hover{
background-color:#444;
}
#navega li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#navega li ul li:first-child:before{
content:”;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
#navega li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#navega li.azul{
/* cor do menu */
background-color:#1caabb;
/* Tcor do texto */
color:##FFF;
}
#navega li.laranja{
background-color:#ef9c64;
color:##FFF;
}
#navega li.roxo{
background-color:#a78be1;
color:##FFF;
}
#navega li.verde{
background-color:#5abd5a;
color:##FFF;
}
O código CSS final para o menu vertical:
@charset “utf-8″;
#navega > ul{
width: 150px;
}
#navega > ul > li{
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
line-height: 1;
margin: 10px;
border-radius: 3px;
position:relative;
padding: 25px;
}
#navega > ul > li > a{
color:#FFF;
text-decoration:none !important;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:16px;
}
#navega li ul{
position: absolute;
list-style: none;
text-align: center;
width: 100px;
left: 190px;
margin-left: -90px;
top: -18px;
font: bold 12px ‘Open Sans Condensed’, sans-serif;
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 0.4s linear;
-moz-transition: max-height 0.4s linear;
transition: max-height 0.4s linear;
}
#navega li:hover ul{
max-height:200px;
}
#navega li ul li{
background-color:#313131;
}
#navega li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:inline-block;
}
#navega li ul li:nth-child(odd){
background-color:#363636;
}
#navega li ul li:hover{
background-color:#444;
}
#navega li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:35px;
position:relative;
}
#navega li ul li:first-child:before{
content:”;
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-right-color:#313131;
left:-6px;
top:40%;
margin-left:-5px;
}
#navega li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#navega li.azul{
/* cor do menu */
background-color:#1caabb;
/* Tcor do texto */
color:##FFF;
}
#navega li.laranja{
background-color:#ef9c64;
color:##FFF;
}
#navega li.roxo{
background-color:#a78be1;
color:##FFF;
}
#navega li.verde{
background-color:#5abd5a;
color:##FFF;
}
O resultado no Browser pode ser visualizado no link abaixo.