Menú Bordeado Animado

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos casos, poner debajo un menú horizontal con las categorías puede ser inconveniente porque el menú quedaría escondido, con lo que perdería su eficacia. Si es el caso que la plantilla es de 2 columnas, con el sidebar a la derecha te recomendaría este menú. Como veis en la imagen a continuación, coloca una imagen arriba, por la que al pasar el ratón despliega un menú a la izquierda y abajo muy ligero y fácil de hacer.<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDi8attuu7-8mH4NKIBL1Zl2zYqOvzFI5A5k1qACvN3cE_WlAlv0s9mKsCdfDZP5W4FVokJdpq_OvqDqBoX2KvLZTiyp5P0dKAnG6-AQROs3Q_e1yCg0wMbMYbQRf1Lmsq4WgUyWc25fw/s1600/menu.jpg" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;"><img alt="Menú Bordeado Animado" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDi8attuu7-8mH4NKIBL1Zl2zYqOvzFI5A5k1qACvN3cE_WlAlv0s9mKsCdfDZP5W4FVokJdpq_OvqDqBoX2KvLZTiyp5P0dKAnG6-AQROs3Q_e1yCg0wMbMYbQRf1Lmsq4WgUyWc25fw/s1600/menu.jpg" title="Menú Bordeado Animado" /></a></div> <br /> Lo primero vamos a Plantilla y en el html buscamos la etiqueta <b></head></b> y justo antes de ella pegamos el siguiente código:<br /> <blockquote class="tr_bq"> <link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/iconos.css"/><br /><link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/menuanimado.css" /> </blockquote> Ahora buscamos la etiqueta <b></body></b> y justo encima pegamos lo siguiente:<br /> <blockquote class="tr_bq"> <script src="http://sites.google.com/site/recursosbit/classie.js"></script><br /><script src="http://sites.google.com/site/recursosbit/castromenu.js"></script></blockquote> Guardamos los cambios y nos vamos a crear un widget Html en Diseño y dentro pegamos lo siguiente:<br /> <blockquote class="tr_bq"> <nav id="menucastro" class="menucastro"><br />    <a href="#" class="menucastro-trigger"><span>Menu</span></a><br />    <ul><br />     <li><a href="#">Link 1</a></li><br />     <li><a href="#">Link 2</a></li><br />     <li><a href="#">Link 3</a></li><br />     <li><a href="#">Link 4</a></li><br />     <li><a href="#">link 5</a></li><br />    </ul><br />    <ul><br />     <li><a href="#" class="castro-iconos icon-twitter">Twitter</a></li><br />     <li><a href="#" class="castro-iconos icon-gplus">Google+</a></li><br />     <li><a href="#" class="castro-iconos icon-facebook">Facebook</a></li><br />     <li><a href="#" class="castro-iconos icon-github">icon-github</a></li><br />    </ul><br /></nav> </blockquote> Fuente: <a href="http://bitcreativo.blogspot.com.es/2013/10/menu-bordeado-animado.html#.UlNTq1PMgvk" rel="nofollow" target="_blank">BitCreativo</a>

Menú Bordeado Animado

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos ca...

Leer más »