3 de ago de 2013

Menu horizontal drop drown

Olá Anjos!

Acabei de perceber que não coloquei nenhum link para o Anime Pics aqui. É por isso que gosto de menus acima do cabeçalho, sempre tem espaço para mais um link. Vou pensar em uma página, ou algo para colocar o link dele, ainda tenho muito o que organizar aqui no blog. Falando em organizar, organizei todas as tags do blog, mudei alguns e tirei aquele "x" que tinha antes de cada uma. O problema do X é que na hora de acrescentar uma nova tag, eu tinha que ficar copiando e colando, porque esqueci quais caracteres colocavam ele. Sem o X está mais fácil de procurar, de qualquer maneira.

O tutorial de hoje é um menu super útil para quem tem muitas páginas no blog. Ao passar o mouse em cima de um link, outros links vão aparecer, o nome de menus assim é drop drown. Ensinei um aqui uma vez, mas esse tinha sublinks. Esse é diferente daquele, porque além de ser menor, apenas um link abre por nome. No preview vocês vão entender o que estou tentando explicar.

1ª Parte - Aplicar o estilo do menu:

1-Vá no seu HTML, procure por ]]></b:skin> e acima cole o seguinte código:


/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%;height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;  /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
As imagens são o fundo do menu, se quiser cor sólida, troque por #códigodacor. Se você quiser colocar as mesmas cores do preview pegue o código aqui.

Se você colocar o código da segunda parte (abaixo) em um gadget, mude a cor do fundo no Designer do modelo > plano de fundo das guias.

2- Visualize e salve.

2ª Parte: Instalar o menu:

1- Cole em um Gadget de HTML/JavaScript:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='SEU LINK AQUI'>Nome do Link 1</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Nome do Link 2</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Nome do Link 3</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Nome do Link 4</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
<li><a href='SEU LINK AQUI'>Nome do Sublink</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>

A parte em itálico corresponde ao link principal, a parte em sublinhado corresponde aos sublinks.  Edite os links e os nomes de acordo com seu blog.

1.5- Caso queira colocar o menu pelo HTML, usa a tag referente ao cabeçalho.

(Em modelos Designer do Modelo):
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag: <header>
Se quiser que o menu fique abaixo do cabeçalho,  basta instalar o código abaixo da tag: </header>

(Template minima):
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag <div id='header-wrapper'>. 
Caso queira que o menu fique abaixo do cabeçalho, basta instalar o código acima de <div id='content-wrapper'>

2- Salve.

Espero que gostem do tutorial. Logo logo vou começar a atualizar as categorias do blog, que já estão cheias de teia de aranha, de tão paradas.

8 comentários:

  1. Que bonitinho! Já fiquei louca atrás dele! Beijos.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Eu também procurava muito esse menu, é super útil ^^

      Excluir
  2. É muito complicado e extenso pra mim!
    Mas acho bem legal layouts estilo revista com esse estilo de menu!

    ResponderExcluir
  3. porque voce parou de seguir meu blog?

    ResponderExcluir
  4. tudo bem ja tirei me desculpa qualquer coisa, ta.

    ResponderExcluir
  5. Hum... perguntinha: teria como eu colocar o menu centralizado? Ou ele só fica alinhado a esquerda? E se tiver algum modo de centralizar, poderia me dizer como?
    Obrigada. =3

    ResponderExcluir
    Respostas
    1. Taí uma coisa que sempre quis fazer com esse menu, centralizar. Tentei de todas as maneiras centralizar, mas não dá. O único jeito é alinhado a esquerda mesmo =/

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!