Bienvenidos:

Bienvenidos a bitcreativo blog, herramientas para nosotros los diseñadores que podran obterner en libre descarga, a cambio solo les pido que compartan nuestros post en sus redes sociales.

lunes, 7 de octubre de 2013

Menú Bordeado Animado


Así se vera el menú al hacer clic en el mientras tanto estará escondido, se que es algo muy parecido al menú de youtube movil, a muchos otros menús que han echos para tablas, pero no me vengan a decir que habían visto uno parecido para blogger porque la verdad es que no les voy a creer.

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. 

Instalacion

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


<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>


<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:
<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>


¿¡Ey! pero como hago el gadget sin titulo? Sencillo compañeros en el titulo del gadget van a pegar lo siguiente: &nbsp;

Espero haberlos ayudado y que esta herramienta les sea util, me despido hasta la proxima!

Compartelo! Be Social♥

José Castro

Diseñador gráfico y creativo, desarrollador de sitios web y un futuro iluminatis, blogger en tiempos libres y me encanta compartir conocimientos con los demas. José Castro en Google+

0 comentarios :

Publicar un comentario

Copyright @ 2013 BitCreativo - Tu Imaginación es Nuestra Realidad . Designed by Life Castro

La unica regla: Leer y Compartir.