19 de mai. de 2010

Menu nav, com efeito hover

Do blog Vagabundia peguei este menu e repasso para quem tiver interesse...



REVISADO EM DEZEMBRO DE 2010


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.






Copie o código abaixo e no HTML de seu blog, antes de
]]></b:skin>
cole o código abaixo:


.navi1 {
  display: block;
  height: 64px;
  margin:0 auto;
  position: relative;
  width: 525px;
}
.navi1 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi1 ul li {
  height: 64px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-Xt3oUwmOD5PiTPkXVhG-RKDWwyLTOi5ZXKhT7Zdod7dkICNJFND_5ljxCkNZN_eR7DS6eBS4_zIr3GDoiSFw-XGYGjwpe8M6pHPcId67RiHVQblaU8QdaTo4ZX85xx52EViOs4afi0/s0/tab-1.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  padding-top: 5px;
  position: absolute;
}
.navi1 ul li a {
  display: block;
  height: 100%;
  width: 100%;
}
.navi1 ul li.sm1 { background-position: 0px 0px; left: 0px; width: 125px; }
.navi1 ul li.sm2 { background-position: -125px 0px; left: 100px; width: 124px; }
.navi1 ul li.sm3 { background-position: -249px 0px; left: 200px; width: 124px; }
.navi1 ul li.sm4 { background-position: -373px 0px; left: 300px; width: 125px; }
.navi1 ul li.sm5 { background-position: -498px 0px; left: 400px; width: 126px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.sm1:hover { background-position: 0px -75px; }
.navi1 ul li.sm2:hover { background-position: -125px -75px; }
.navi1 ul li.sm3:hover { background-position: -249px -75px; }
.navi1 ul li.sm4:hover { background-position: -373px -75px; }
.navi1 ul li.sm5:hover { background-position: -498px -75px; }



Agora este próximo código cole em um widget, especificamente no HTML/Javascript



<div class='navi1'>
  <ul>
    <li class='sm1'><a href='ENDEREÇO HOME'/></li>
    <li class='sm2'><a href='ENDEREÇO ABOUT'/></li>
    <li class='sm3'><a href='ENDEEÇO BLOG'/></li>
    <li class='sm4'><a href='ENDEREÇO WORKS'/></li>
    <li class='sm5'><a href='ENDEREÇO CONTACT'/></li>
  </ul>
</div>

4 comentários:

  1. Olha... os links funcionaram, mas num deu o efeito hover, de passar o mouse por cima e colorir... apenas ficou um quadrado cinza em cima do que eu passava o mouse. Qual seria a solução?

    ResponderExcluir
  2. no MEU TMB DEU ISSO MAS AI EU FUI NO HTML E APAGUEI A PARTE TABS DO MEU TEMPLATE DAI FICOU CERTO

    ResponderExcluir
  3. Vlw, deu certinho no meu, so que fiz algumas alterações.
    http://pointdagaleraonline.blogspot.com/

    ResponderExcluir
  4. Como edito os nomes? chr.muller@hotmail.com

    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