18 de jun de 2008

Menu vertical com efeito

Para ter um menu como esse, copie o primeiro código, vá até o HTML de seu blog e procure pelo código:

]]></b:skin>

Cole então acima o código.



Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.









#navcontainer
{
background: #E4E0E0;
width: 200px;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}
ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;
}
ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 190px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #fff #808080 #ccc #fff;
border-style: solid;
color: #808080;
text-decoration: none;
background: #cccccc;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #808080;
color: #000000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #FA8856;
background: transparent;
border-color: #000000 #fff #fff #ccc;
}




* O que está em vermelho são as cores do menu. Troque se quiser.

Agora vá até elementos de página, clique em "Adicionar um nove elemento de página" e agora em HTML/Javascript. Cole o código abaixo colocando seus links.



<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="ENDEREÇO DO LINK 1">LINK 1</a></li>
<li><a href="ENDEREÇO DO LINK 2">LINK 2</a></li>
<li><a href="ENDEREÇO DO LINK 3">LINK 3</a></li>
<li><a href="ENDEREÇO DO LINK 4">LINK 4</a></li>
<li><a href="ENDEREÇO DO LINK 5">LINK 5</a></li>
</ul>
</div>




Créditos: Listamatic

18 comentários:

  1. Amigo as letras só ficam minusculas como eu faço para colocar letra Maiscula?? mesmo assim muito bom o menu se tiver mais menus legais posta aqui falo !!!

    ResponderExcluir
  2. ou passa a dica pra colocar as letras maiusculas ai velho.. obrigado

    ResponderExcluir
  3. hahahah eu descobri como colocar as letras maiusculas kkk em :

    font-size: 13px;
    text-align: center;
    text-transform: ( lowercase; )

    apague lowercase e digite: uppercase
    aí é só salvar

    lowercase - menusculas
    uppercase- maiusculas

    em font-size: 13px; . coloquem 15px; para aumentar o tamanho da fonte. pronto só isso :P

    ResponderExcluir
  4. Finalmente depois de bilhões de dicas que não deram certo para colocar um menu em botões na sidebar,até que um dia uma dica que deu certo,valeu mesmo,inclusive a dica do Jedeias para ficar as letras maíusculas,mas alguém me ajuda aí,só falta fazer oos botões trocar a cor qdo passar o mouse,igual ficou lá encima,nos botões de exemplo,é que o meu não troca a cor qdo passo o mouse,como faço,alguém sabe,valeu!

    ResponderExcluir
  5. Parabéns cara muito boa a dica.

    Vlw

    vc poderia ensinar a como retirar Layout (colunas)do rodapé do blog?

    obrigado!!!

    ResponderExcluir
  6. Olá!!!

    Depois de muito tempo prcurando, achei um MENu VERTICAL que funcionasse... Muito bom!!!
    Muito Obrigado!!!
    olha só como ficou meu Blog: http://roeguilembrancas.blogspot.com
    Ainda dividi o menu ...
    Só faltou uma coisa que não consegui: colocar a fonte em negrito... dá pra ajudar mais um cadim??? rs

    Antonio José
    roeguilembrancas@gmail.com
    www.roeguilembrancas.com.br

    ResponderExcluir
  7. cara parabéns,para nós que não sabemos muita coisa de web design essas dics são tesouros muito dificeis de encontrar,muito obrigado por gastar seu tempocriando templates e pesquisando,vlw

    ResponderExcluir
  8. No meu eu coloquei 15px mas ainda ficou minusvcula! Me ajuda ae!

    ResponderExcluir
  9. Pooooo oo meu naoo de certooo .
    eu clicoo e aparece Essa pagina nao foi encontrada.
    ooque eu faço ?

    ResponderExcluir
  10. AMIGO.. NÃO SOU GAY..MAS EU TE AMO TAMBEM SSRS!! SIMPELS... E EPRFEITO.. MUUUUUUUUUUUUIIITO OBRIGADO..!!

    ResponderExcluir
  11. ola ... Presciso de um Contador de visitas igual esse urgente to um tempao atras porfavor mande o Site onde posso arruma - mande pro meu imail . Abne.Relaxa@hotmail.com
    att .

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube