Crear Menu HTML inteligente

Hola, espero estés bien. muchas veces cuando hacemos paginas HTML deben tener un menú de navegación ya que el usuario por lo general podrá basarse en eso para saber en que parte de tu sitio se encuentra. Entonces hoy te enseñare a crear uno sin necesidad de usar PHP(como también se puede hacer). empecemos:

lo primero que se debe crear es el documento INDEX.HTML que sera tu pagina principal(recordando que los servidores reconocen este nombre de archivo como tu pagina principal). una vez creado esto hacemos el menú haciendo uso de una lista.

Imagen

 

después de esto haremos uso de reglas CSS para darle estilo a nuestro menú y tenga una mejor apariencia:

Imagen

 

esto hasta ahora se ve así en nuestros navegadores:

Imagen

ahora solo queda hacer la parte de JAVASCRIPT para que esto funcione y nos indique en sitio se encuentra una vez dando clic en cada uno de nuestros link, este seria el SCRIPT que se usaría:

Imagen

 

aclaro que usaremos JQUERY para poder hacer uso de la función ‘ready’ que nos ejecutara este SCRIPT cuando el documento se cargue. y eso seria todo. el resultado final sera este:

Imagenpodemos aplicarle mas reglas CSS a nuestro menu para que se vea mas vistoso si se desea.

les dejo el link del ejemplo : LINK

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s