Cargando



Barra horizontal con efecto hover en html5, css3 y bootstrap

En este tutorial estaremos diseñando una barra horizontal estilo menú con un poco de animación, para esto utilizaremos Html5, css3, boostrap e iconos de font awesome...


sep 03 2015 22:13
Profesional
sep 04 2015 10:37

Que necesitamos?


Un servidor local (ya les he comentado que uso Xampp)
·
Un editor de código (uso sublime text 3)

Paso 1


Comenzaré por ir al directorio de mi servidor local y crear una nueva carpeta para almacenar este proyecto, la llamaré “menú_hover” dentro de ella añadiré otra para contener los archivos css.






Paso 2


Ahora en nuestro editor de código comenzaremos por añadir una nueva estructura html5 a la que le añadiré las hojas de estilo correspondientes a bootstrap desde sus direcciones CDN para no ocupar espacio en nuestro servidor, además añadiré una hoja de estilo, llamada “style.css” que estará almacenada en nuestra carpeta “css” creada anteriormente…

Posteriormente guardaremos este archivo como “menú.html” en la carpeta “menú_hover” creada en el paso 1.




Paso 3


Ahora añadiremos a nuestro “menú.html” una etiqueta <header> y estableceremos como se mostrara en pantalla estableciendo sus propiedades en el archivo style.css…






Como verán en el css he añadido un “background-color: green” esto es solo con fines orientativos para ver el tamaño y posición del header en pantalla, ustedes pueden jugar con los tamaños, tipo de letra y demás según sean sus preferencias… si ahora mismo lo vemos en nuestro navegador tendríamos algo como esto…




Paso 4


Quiero que mi menú este conformado por 4 enlaces, para lograr esto dentro de la etiqueta <header> añadiré 4 <div> con la clase “box_menu” para identificarlos les agregare a cada uno un id creciente del “uno” al “cuatro”.




Paso 5


En nuestro archivo style.css añadiremos las propiedades para la clase “box_menu” y para las capas “uno, dos, tres y cuatro”.

Paso 6


Comenzaremos a definir el comportamiento de la clase “box_menu” estableciéndole una posición relativa, recordemos que en este caso tendremos 4 enlaces y que la capa que los contiene, es decir el <header>, ocupa el 80% de la pantalla, por lo cual necesitaremos que los 4 elementos con la clase box_menu ocupen el 100% del espacio disponible dentro del <header> para esto tomaremos el 100% y lo dividiremos entre la cantidad de enlaces o elementos que queramos colocar, como en este caso son 4 entoces seria 100/4=25, por lo que nuestra clase “box_menu” deberá tener un ancho de 25%. Le daremos además un alto de 100% y le diremos que flote hacia la izquierda, de manera que los elementos se vean uno al lado del otro.




Paso 7


Posteriormente definiremos el color de fondo con el que vamos a mostrar cada uno de los elementos, en el paso 4 añadimos id del uno al cuatro ahora en nuestro css definiremos como se verán cada una de estas capas. para esto haremos lo siguiente…




Esto nos dará el siguiente resultado:




Como pueden ver ya tenemos delimitado los espacios de cada elemento y su color de fondo, pueden utilizar los códigos de color de acuerdo a sus gustos, en este caso como no se trata de un sitio web con una temática especifica sino de una prueba he usado estos a modo de demostración…

Paso 8


Bien volvamos al documento “menu.html” tal cual como lo dejamos en el paso 4, ahora procederemos a agregar los iconos y el texto que tendrá nuestro menú para esto no vamos a utilizar imágenes sino que nos vamos a ayudar un poco con bootstrap y usaremos iconos del paquete “Font Awesome”, para esto vamos al navegador y accedemos a la web https://fortawesome....o/Font-Awesome/hacemos click en el menú “Get started” y bajamos a la sección “EASIEST: BootstrapCDN by MaxCDN”.




Copiare el enlace CDN a la hoja de estilos de Font Awesome y lo pegare en la cabecera de mi documento “menú.html”




Con esto ya podemos usar los iconos de Font Awesome en nuestro diseño, pero ahora tenemos que escoger cuales iconos vamos a colocar, para esto volvemos a su sitio web y ubicamos el menú “Icons”.




Buscamos entre la extensa lista el icono que nos interese y hacemos click sobre él.




Al hacer click nos llevara a otra ventana en la cual podremos ver el código para insertar ese icono a nuestro diseño.




Simplemente lo copiamos y vamos a nuestro “menú.html” y lo pegamos dentro del <div class="box_menu" id="uno"> de la siguiente manera…




También le añadiremos debajo un nombre que se muestre centrado…




Comprobemos como va quedando en nuestro navegador…




Vemos que ya hemos agregado un icono y un texto centrado entonces repitamos este paso para los 3 elementos restantes.




Paso 9


Los iconos son bastante pequeños, incrementare su tamaño 3 veces, para esto les añadiré una clase “fa-3x”.






Paso 10


Ahora modificare un poco el archivo css para completar el efecto, comenzare por modificar la clase “box_menu” alineando el texto al centro y dándole un display=”block”;




Paso 11


Posteriormente escribiré una clase para controlar como se verán los iconos, en la cual definiré que se muestren en color blanco, que tengan a su alrededor un borde redondeado y que tengan una animación de transición…




Paso 12


En cuanto a los textos de la etiqueta <p> los colocare en color blanco y le disminuiré un poco la opacidad agregándole también un ligero efecto de animación hacia abajo.




Paso 13


Ahora definiré como se comportaran nuestros elementos al pasar el mouse por encima y le añadiré un poco de animación para suavizar el efecto.




Una vez hecho esto podemos decir que hemos terminado de diseñar el efecto, ahora solo falta que le añadan los enlaces en la forma que ustedes deseen, les comento que este efecto también puede usarse para colocar imágenes que tengan debajo de ellas un texto descriptivo como por ejemplo un portafolio profesional, una galería o un catálogo de productos todo queda de parte de su imaginación…

Al final les dejaré un .zip con el código fuente, si te ha gustado este tutorial deja tu comentario, si hubo algo que no quedo claro por favor pregúntame, si te gustaría un tutorial sobre un tema en especifico házmelo saber...
Espero les sea de utilidad saludos...


Imagen4.gif



Archivo con código fuente..

¿Te ayudó este Tutorial?


8 Comentarios

¡¡Me ha parecido la bomba!! Qué buena entrada como nos tienes acostumbrados. Me gusta el efecto de menu de barra. Gracias Ronny.


Ronny Bonillo
sep 04 2015 16:34

Que tal Nestor, de nada amigo, que bueno que te halla gustado... :)


Lucas Rodriguez
sep 04 2015 23:55
Gracias por poner tambien el archivo del codigo para descarga, me ha venido genial tambien. Muy bien explicado y ütil.

Pablo Santos
sep 05 2015 12:45

+1, práctico y útil si señor.


Ronny Bonillo
sep 06 2015 02:43
Gracias por los puntos ;-) me alegra q les sea de utilidad...

Fabini De Caprius
jul 24 2016 12:04

Muy bueno el tuto!


Stitch Frank Ynga Yanarico
mar 12 2022 18:26

Esta bueno el tuto


Stitch Frank Ynga Yanarico
mar 12 2022 18:27

no veo el archivo para descargar

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X