E ai pessoal, hoje quero falar sobre como criar menu e submenu com CSS3 isso é muito útil e simples para o desenvolvedor e não precisa mais usar o Jquery para ter um efeito de FadeIn e FadeOut por exemplo.
Vamos começar a criar um Menu junto com um Submenu bem básico com UL e LI:
[sourcecode language=”xhtml”]
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Empresa">Empresa</a></li>
<li>
<a href="#" title="Produtos">Produtos</a>
<ul>
<li><a href="#" title="Sub Produto 1">Sub Produto 1</a></li>
<li><a href="#" title="Sub Produto 2">Sub Produto 2</a></li>
<li><a href="#" title="Sub Produto 3">Sub Produto 3</a></li>
</ul>
</li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
[/sourcecode]
Veja como ficou essa primeira parte.
Agora vamos adicionar o estilo no HTML, para fazer isso eu vou fazer via,
[sourcecode language=”css”]
<style type="text/css"></style>
[/sourcecode]
para que fique mais simples para visualizar, mas vocês podem e devem colocar esse style dentro do seu arquivo de CSS, mas antes de iniciar o Style eu vou dar um CSS Reset e usar uma fonte do Google Fonts para que fique mais apresentável.
Para adiciocar o CSS Reset é preciso colocar esse código dentro do seu <head> “eu gosto de usar a API do Yahoo mas se vocês preferirem por fazer manualmente”:
[sourcecode language=”css”]
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css">
[/sourcecode]
E por fim vou colocar uma font do Google Fonts, eu escolhi a font “Dosis”, mas existe varias que vocês podem usar ou se preferirem pode ser uma fonte personalizada se desejar.
[sourcecode language=”css”]
<link href=’http://fonts.googleapis.com/css?family=Dosis’ rel=’stylesheet’ type=’text/css’>
[/sourcecode]
Vou começar a colocar o css, para que o nosso menu tenha já alguma aparência mais agradável:
[sourcecode language=”css” highlight=”30″]
<style type="text/css">
a{
text-decoration: none;
}
body > ul{
font-family: ‘Dosis’, sans-serif;
font-size: 18px;
}
body > ul > li{
float: left;
position: relative;
margin-left: 5px;
}
body > ul > li:first-child{
margin-left: 0;
}
body > ul > li > a{
color: #ffffff;
padding: 5px 10px;
background: #999999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
body > ul > li > ul{
visibility: hidden;
position: absolute;
left: 0;
top: 23px;
padding: 4px 7px;
}
body > ul > li:hover > ul{
visibility: visible;
text-align: left;
}
body > ul > li > ul > li{
display: block;
font-size: 12px;
margin-bottom: 5px;
}
</style>
[/sourcecode]
Se vocês repararem na linha 30 eu coloquei a propriedade visibility: hidden; sem ela não irá funcionar o efeito de Fade que nós queremos adicionar em nosso submenu. Porque se vocês colocarem o display: none; irá funcionar mas no final não irá ficar com o efeito esperado.
Veja como esta ficando o nosso menu com o css, segunda etapa.
Nessa penultima etapa eu vou colocar o estilo no submenu, eu preferi separar as explicações do css do menu e do submenu , para que fique mais simples de entender como funciona.
[sourcecode language=”css” highlight=”8,9,10,11″]
body > ul > li > ul{
padding: 4px 7px;
}
body > ul > li:hover > ul{
visibility: visible;
text-align: left;
background: #999999;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
body > ul > li > ul > li > a{
color: #fff;
}
[/sourcecode]
Veja que eu adicionei padding no estilo na UL, porque se adicionar dentro do li:hover na hora da “animação” haverá um pequeno erro de apresentação, nas linhas 8,9,10 e 11 eu adicionei um background com a mesma cor do menu e bordas arredondadas na parte inferior do submenu para que fiquei com um aspequito de continuidade e por fim adicionei a cor branca na tag <a>.
Veja como ficou o nosso submeu terceira etapa.
Agora começa a brincadeira, vamos trabalhar com “transition e opacity” só tem uma restrição o transition não funciona corretamente com o Internet Explore, mas o opacity funciona normalmente, veja abaixo como que eu fiz essa parte final do nosso Menu e Submenu com CSS3.
[sourcecode language=”css”]
body > ul > li > ul{
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-moz-opacity: 0.00;
opacity: 0.00;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
body > ul > li:hover > ul{
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
[/sourcecode]
Primeiro eu adicionei os atributos na UL do submenu como o transition “para conhecer mais sobre os atributos dele acesse esse link.” e falei para ele iniciar com o opacity em 0%.
E para finalizar dentro do li:hover eu coloque o opacity em 100% assim quando :HOVER ele criará o efeito de FadeIn e quando deselecionar ele aplicará o FadeOut.
Veja como ele ficou com esse processo final.
Bom é isso por enquanto, até mais breve e por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais…
