Atualizado 13/06/2014
Fazer submenu não é nada complicado, e menu de topo menos ainda! veja a preview do menu:
Fazer submenu não é nada complicado, e menu de topo menos ainda! veja a preview do menu:
 |
| Prévia na img (o menu nao vem com background, ele é transparente) - clique para ampliar |
Veja que na página eu fiz um menu assim e agora, vou deixar ele para vocês como sempre deixo códigos e coisinhas para vocês pq eu sou muito legal ne ^-^
vamos la então pessoinhas.. :33
tuto:
Entre em modelo > editar html
e procure por:
]]></b:skin>
Antes dele, cole este código:
(o código css)
/* menu topo
----------------------------------
*/
#menubpd {
background: rgba(0, 0, 0, 0.1);
border-left: 77px solid transparent;
width: 1114px;
height: 42px;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}
#menubpd {
font-size: 14px;
font-family: arial;
font-weight: normal;
letter-spacing: 0.1em;
}
#menubpd li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu */
padding: 0px;
}
#menubpd li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 42px;
}
#menubpd a:hover {
color:#fff;
}
#menubpd ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
#menubpd li ul {
z-index: 9999;
position: absolute;
left: -999em;
background: rgba(0, 0, 0, 0.1);
height: auto;
width: 120px;
padding-left: -40px;
}
#menubpd li ul a {
font-size: 12px;
line-height: 24px;
}
#menubpd li:hover ul ul,
#menubpd li:hover ul ul ul,
#menubpd li.sfhover ul ul,
#menubpd li.sfhover ul ul ul {
left: -999em;
}
#menubpd li:hover ul,
#menubpd li li:hover ul,
#menubpd li li li:hover ul,
#menubpd li.sfhover ul,
#menubpd li li.sfhover ul,
#menubpd li li li.sfhover ul {
left: auto;
}
/* drop down do menu
------------------------------- */
#menubpd li li a, #menubpd li li a:link, #menubpd li li a:visited {
padding: 8px;
}
E pronto, falta o código dos links
procure por:
<body>
e após dele, cole isso:
<div id='menubpd'>
<li><a href='LINK DO MENU NORMAL AQUI'>NOME AQUI</a></li>
<li>
<a href='link do menu submenu'>TITULO DO menu SUBMENU></a>
<ul>
<li><a href='link do submenu'>NOME DO SUBMENU</a></li>
</ul>
</li>
</div>
Agora vamos na parte de edição do menu
altere aonde está em negrito e pronto ^-^
2 comentários:
Adorei o tuto, esse menu é lindo °u°
Kissus ♥
Mellifluous ~ s-alad.blogspot.com.br <--visita ? *W*
Oh, obg >.<
visito sim *-*
Postar um comentário
Obrigada por comentar, deixe seu blog no comentário para eu retribuir *-*