Menu bordado animado: instalação e personalização fácil

  • Autor Autor lifecastro
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
L

lifecastro

Gamma
Diseñador
Verificación en dos pasos activada
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
0xip9.png

Basado en css/javascript este es uno de los menús mas bonitos que podrán encontrar para un sitio ¿por que? fácil, porque es rápido, funcional, elegante y se puede adaptar a cualquier sitio.

Demo

Instalacion

1) Colocar este condigo antes de finalizar la etiqueta </head>

Inserir CODE, HTML ou PHP:
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/iconos.css" />
  <link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/menuanimado.css" />

2) Colocar el siguiente código antes de finalizar la etiqueta </body>

Inserir CODE, HTML ou PHP:
<script src="http://sites.google.com/site/recursosbit/classie.js"></script>
 <script src="http://sites.google.com/site/recursosbit/castromenu.js"></script>

3)Situar el siguiente código en alguna división que sea visible en todo el blog por ejemplo en la división del header <div class='header-cap-bottom cap-bottom'> siempre sera visible, pero para los que no sepan mucho de programacion basta solo con crear un gadget html/javascript sin titulo y pegar el siguiente codigo:

Inserir CODE, HTML ou PHP:
<nav id="menucastro" class="menucastro">
    <a href="#" class="menucastro-trigger"><span>Menu</span></a>
    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">link 5</a></li>
    </ul>
    <ul>
     <li><a href="#" class="castro-iconos icon-twitter">Twitter</a></li>
     <li><a href="#" class="castro-iconos icon-gplus">Google+</a></li>
     <li><a href="#" class="castro-iconos icon-facebook">Facebook</a></li>
     <li><a href="#" class="castro-iconos icon-github">icon-github</a></li>
    </ul>
   </nav>

Saludos y espero les sirva de mucho!

Fuente: Menú Bordeado Animado ~ BitCreativo - Tu Imaginación es Nuestra Realidad
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Ha quedado excelente, felicitaciones! :encouragement:
 
Bonito aporte muchas gracias 🙂 :encouragement:
 
Lindo Efecto.


Cabe destacar, que esto anda en cualquier web, independientemente de la plataforma 😀
 
Pero que bonito menú :encouragement:
 
Te quedó bien implementado, pero tal vez deberías darle crédito al autor :encouragement:
 
muy chulo jejej
 
Voltar
Topo