Aprenda como fazer um menu drop down (Para quem não sabe, menu drop down, é aquele que quando você passa o mouse em cima se abre varios sub-menus com efeito de cores etc..) É um menu que além de útil é muito decorativo!
Vou disponibilizar para vocês o código já pronto.
PARTE1: Faça login no seu blog e click em layout, em seguida editar html e em expandir modelo de widgets. (É recomendado fazer download do seu modelo atual, pro caso de dar algo errado).
Agora localize no html do seu blog a seguinte tag: ]]></b:skin> Agora copie e cole o código abaixo logo acima dela!!
/* Navigations
-----------------------------------------------
*/
#foxmenucontainer {
width:100%;
margin:0 auto;
height : 25px;
padding : 0 0 0 0;
font : 10px Century gothic, verdana, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
background : #000;
clear:both;
}
#menu, #menu ul {
margin : 0 5px 0 5px;
padding : 0;
list-style : none;
height : 25px;
}
#menu a {
color : #ddd;
display : block;
font-weight : bold;
padding : 5px 10px 5px 10px;
}
#menu a:hover {
color : #fff;
display : block;
text-decoration : none;
}
#menu li {
float : left;
margin : 0 0 0 0;
padding : 0;
}
#menu li li {
float : left;
margin : 0 0 0 0;
padding : 0;
width : 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background : #5d0909;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #dfc3c3;
}
#menu li li a:hover, #menu li li a:active {
background : #971515;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #d7a1a1;
}
#menu li ul {
position : absolute;
width : 150px;
left : -999em;
z-index : 200;
}
#menu li:hover ul {
left : auto;
display : block;
}
#menu li:hover ul, #menu li.sfhover ul {
left : auto;
}
* Category menu
----------------------------*/
#catmenucontainer {
width:100%;
margin:0 auto;
height : 50px;
padding : 0 0 0 0;
font : 11px Century gothic, verdana, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
background : #fefefe url(https://sites.google.com/site/variedadesc/papeis-de-parede/Fechamentodropdown.png?attredirects=0) repeat-x bottom;
clear:both;
}
#catmenu{
margin: 0px;
padding: 0px;
width:600px;
background:transparent;
height:50px;
float:left;
}
#catmenu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
height:34px;
}
#catmenu a {
color : #333;
display : block;
font-weight : bold;
padding : 18px 10px;
border-right:1px groove #ddd;
}
#catmenu a:hover {
color : #fff;
display : block;
text-decoration : none;
background : #333;
padding : 18px 10px;
}
#catmenu li {
float: left;
margin: 0px 0px;
padding: 0px 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
width: 150px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#DEDCDD ;
width: 150px;
float: none;
margin: 0px 0px;
padding: 7px 10px 7px 10px;
color:#555;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#fff ;
width: 150px;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
color:#0066CC;
}
#catmenu li ul {
position: absolute;
left: -999em;
z-index:200;
background:url(https://sites.google.com/site/variedadesc/papeis-de-parede/menu.png?attredirects=0) bottom ;
width:170px;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
PARTE2: Agora mais para baixo localize:
</b:includable>
</b:widget>
</b:section>
</div>
copie e cole o seguinte código logo abaixo de </div>
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
<ul class='children'>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
<ul class='children'>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
<ul class='children'>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO MENU</a>
<ul class='children'>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
<li><a href='ENDEREÇO DO LINK' title='TITULO DO LINK AO PARAR O MOUSE EM CIMA'>NOME DO LINK</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Pronto! agora é só editar os links e nome dos menus!!! Depois click em visualizar, se tudo estiver certo salve o modelo e está pronto seu drop down!
Ele vai ficar logo abaixo do cabeçalho. Você pode editar as cores trocando os códigos! Se voce não souber os códigos das cores é só clicar AQUI e ver todos os códigos de cores html!! Em caso de dúvida ou sugestão é só entrar em contato! Nosso email está no rodapé do site!
OBS: NÃO CLICK NOS LINKS! SÃO APENAS O LOCAL ONDE ESTÃO ARMAZENADAS AS IMAGENS DO MENU! COPIE O CÓDIGO INTEIRO INCLUSIVE OS LINKS!!!
0 Comentários