Menu Drop Down CAPRICHO

accessories, beach, beautiful, black & white

Olá meus amores tudo bem? Hoje vou ensinar um tutorial bem legal, é um menu drop down, esse tipo de menu que tem conquistado os blogueiros! Vamos lá? Clique em Leia Mais e confira!


O tutorial de hoje vai ensinar o seguinte menu abaixo:



Ele é semelhante ao menu do site da Capricho, daí o nome do mesmo. Veja abaixo o menu usado no site da Capricho:


O tutorial é simples e se você deseja que o menu seja do mesmo estilo da primeira imagem, você não vai precisar fazer alterações! Vamos lá?

TUTORIAL

Vá em Modelo > Editar HTML

Procure por ]]></b:skin> e acima dele, você cola:

#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 100%;
background-color:#330033;
}
#hb-menu:before, #hb-menu:after {
content: "";
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
position: relative;
}
#hb-menu a {
float: left;
padding: 10px 11px;
color: #fff;
font: 14px Arial;
text-decoration: none;
}

#hb-menu li:hover > a {
color:#ff0066;
text-decoration: underline;
}
*html #hb-menu li a:hover {
/* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0; _margin: 0; /*IE6 only*/
opacity: 0.9;
visibility: hidden;
position: absolute;
top: 47px;
left: -10px;
z-index: 9999;
background:  #df005a;
}
#hb-menu li:hover > ul {
opacity: 0.9;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 19px; _margin: 0; /*IE6 only*/
}
#hb-menu ul li {
float: none;
display: block;
border: 0; _line-height: 0; /*IE6 only*/
}
#hb-menu ul a {
padding: 10px;
width: 130px;
height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: right;
text-transform: none;
margin-bottom: 5px;
}
#hb-menu ul a:hover {
color: #FFA500;
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 15px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid  #df005a;
opacity: 0.9;
}
#hb-menu ul ul li:first-child a:after {
left: -6px; top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid  #df005a;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color:  #df005a;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

Salve. Agora, procure por:  <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/> e cole o código abaixo, acima desta linha, já editado com seus links:

<ul id='hb-menu'>
<li><a href='#'>home</a></li>
<li> <a href='#'>famosos</a> <ul>
<li><a href='#'>notícias</a></li>
<li><a href='#'>música</a></li>
<li><a href='#'>clips</a></li>
</ul> </li>
<li> <a href='#'>beleza</a> <ul>
<li><a href='#'>maquiagem</a></li>
<li><a href='#'>cabelo</a></li>
<li><a href='#'>esmaltes</a></li>
</ul> </li>
<li> <a href='#'>moda</a> <ul>
<li><a href='#'>it girl</a></li>
<li><a href='#'>famosos</a></li>
</ul> </li>
<li> <a href='#'>você</a> <ul>
<li><a href='#'>comportamento</a></li>
<li><a href='#'>blogueiros</a></li>
<li><a href='#'>escola</a></li>
<li><a href='#'>dicas</a></li>
</ul> </li>
<li><a href='#'>blogs</a><ul>
<li><a href='#'>blog do make</a></li>
<li><a href='#'>blog de moda</a></li>
<li><a href='#'>blog da galera</a></li>
</ul></li>
<li> <a href='#'>diversão</a> <ul>
<li><a href='#'>games</a></li>
<li><a href='#'>música</a></li>
<li><a href='#'>férias</a></li>
<li><a href='#'>downloads</a></li>
</ul> </li>
<li><a href='#'>testes</a></li>
<li><a href='#'>horóscopo</a></li>
<li><a href='#'>sobre</a></li></ul> 

Simples não? Espero que tenham gostado ^^ O menu base é do Dicas Blogger e a adaptações minhas. Façam bom uso meus amores. Mas lembrem dos créditos hein ;D

EXTRAS:

Adicionar uma página no menu:

<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li> 

Adicionar página com sub-páginas:

<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a> <ul>
<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li>
<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li>
<li><a href='LINK_DA_PÁGINA'>NOME DA PÁGINA</a></li>
</ul> </li> 

Até o próximo post gente ;D





PROÍBIDO REBLOGAR