Menu igual o da revista Capricho

20 maio 2013
                           




Hey people! Tudo bom ?? Hoje eu vim postar o meu primeiro tutorial aqui >.< , e também a primeira postagem uhu !!!!
Esses dias eu estava procurando igual a uma louca um menu legal para o blog até que achei um no Uprisingteen , E sim o nosso menu tem como núcleo o da Capricho . Então bora aprender??
Se você quiser igual o menu abaixo não edite nada 


• Vá em Modelo > Editar HTML 
• Ctrl+F e procure na caixa de pesquisa :  ]]></b:skin> 
E acima cole: 

#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;/*cor do meu de baixo*/
}
#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 acima desta linha cole o código abaixo já editando com os seus links :


<ul id='hb-menu'>
<li><a href='Seu Link Aqui'>Início</a></li>
<li> <a href='Seu Link Aqui'>Nome da página</a> <ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul> </li>
<li> <a href='Seu Link Aqui'>Nome da página</a> <ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul> </li>
<li> <a href='Seu Link Aqui'>Nome da página</a> <ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul> </li>
<li> <a href='Seu Link Aqui'>Nome da página</a> <ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da páginas</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul> </li>
<li><a href='Seu Link Aqui'>Nome da página</a><ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li> 
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul></li>
<li> <a href='Seu Link Aqui'>Nome da página</a> <ul>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
</ul> </li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li>
<li><a href='Seu Link Aqui'>Nome da página</a></li></ul> 
Simples assim >.<.Qualquer dificuldade em editar o menu é só falar aqui .

EXTRAS:

Adicionar uma página:

<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> 
Querem um tutorial de como editar o menu ou colocar uma imagem como fundo ?? Comente aqui em baixo ou peça por e-mail ou peça em nossa Ask .

Até a próxima :D


Comentários
0 Comentários

Nenhum comentário:

Postar um comentário

© Dilemas Indies - 2014. Todos os direitos reservados - Criado por: Bárbara Nascimento - Tecnologia do Blogger. imagem-logo