Comenzando el desarrollo de una barra de navegacion

Publicado por asktutorial.

Las barras de navegación representan elementos básicos en la programación Web, su atractiva visualidad así como la sencillez y elegancia que ofrecen a la navegación las han convertido en un factor común para muchos de los sitios que encontramos hoy en Internet. Probablemente no imaginemos lo simple puede ser el desarrollo de una barra de navegación, ni las pocas líneas de código que requiere su finalizacion. El objetivo de este escrito sera describir el proceso de desarrollo de una barra de navegación desde cero. El primer paso sería crear una lista en HTML con los elementos que requiera la barra de navegación que tenemos en mente. En nuestro caso los elementos son: Arnaldo, AskTutorial, Contacto, Ayuda tal y como se muestra en la figura 1. La lista se crea de manera tal que ningún elemento aparezca acompañado de marcas o números y se logra especificando el estilo list-style type:none.

 desarrollo de una barra 1

Figura 1: Lista de elementos que constituirán la barra de navegación y resultado en el navegador.

El siguiente paso sería arrastrar los elementos para que aparezca uno a continuación del otro justo como sucede con una barra de navegación. Este efecto se logra mediante el estilo float. Hemos arrastrado los elementos de la lista hacia el margen izquierdo, la figura 2 muestra el código y el resultado. Además de aplicar el estilo float hemos dado unos toques estéticos a los elementos asignando color y margen. Lo siguiente será lograr que cada elemento que cambie su color cuando el cursor del mouse este ubicado encima de estos.

desarrollo de una barra 2

Figura 2: Elementos arrastrados hacia el margen derecho. Resultado en el navegador. 

Para ello necesitaremos un pequeño fragmento de código JavaScript, que consista en una función que se encargue de resolver esta tarea, la figura 3 muestra las líneas de JavaScript.

desarrollo de una barra 3

Figura 3: Script para cambiar color.

La función recibe dos argumentos, primero el id del elemento al cual se le cambiara´ el color y segundo una variable string que hace papel lógico como si fuese una variable boolean porque dependiendo de si su valor es in eje- cuta una u otra porción del código. En este caso la primera porción, o sea la que esta´ dentro del if se ejecutaría cuando la función sea llamada al dispararse el evento onMouseOver y la otra parte cuando se dispare onMouseOut. La ultima figura muestra los eventos an˜adidos a cada etiqueta HTML y el resultado final. Como puede ver no existe dificultad alguna en crear barras de navegación solamente unas pocas líneas de HTML y JavaScript, no más de 20 y tendrá un elemento importante en la navegación de un sitio. Intente crear sus propios elementos Web no dependa de otros para realizar una tarea que realmente no conlleva grandes dificultades.

desarrollo de una barra 4

Figura 4: Resultado y código final.

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!