Crear un menú de navegación horizontal para tu página web utilizando HTML5, CSS3 y la librería jQuery.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

En este ejemplo para descargar, puedes ver como implementar y crear mediante HTML5 y CSS3 un menú desplegable de navegación para tu página o sitio web.

En el ejemplo, también se implementa el uso de la librería jQuery para aplicar y manejar los efectos del menú entre otras opciones.

En HTML5 se utiliza un elemento <nav> que se debe utilizar como contenedor de una estructura de navegación. En internet explorer, por desgracia este elemento Nav no es compatible, sin embargo, hay una solución sencilla que se puede utilizar para corregir el problema y que el menú se despliegue sin errores de visualización.

Utilizando CSS3 en este caso, el trabajo es mas sencillo, ya que no es necesario el uso de varias imágenes de fondo para los elementos y botones del menú, esquinas redondeadas y sombras, por ejemplo, ya que estas opciones están disponibles para los navegadores que lo soporten.

A continuación puedes ver como es el funcionamiento básico del menú, los archivos que requiere y una vista previa del mismo,

 

Mas información sobre el programa.

Indice - Contenido.

  1. Incluir archivos javascript y CSS a la página que contiene el menú.
  2. Código fuente del ejemplo.
  3. Vista previa del menú.

 

1 - Incluir archivos javascript y CSS a la página que contiene el menú.

Para crear el menú se necesitan dos archivos javascript. El primer es la librería jQuery que ya se incluye en el ejemplo de descarga, actualmente se utiliza la versión 1.4.2 de dicha librería. También la biblioteca Modernizr ( Archivo modernizr.js).

Para ello, se crea una carpeta de proyecto principal y dentro de esta carpeta crear tres nuevas carpetas, una llamada js ( para los javascript) y colocamos los dos archivos anteriores. La otra carpeta llamada css contendrá 3 archivos ( La hoja de estilos CSS3 principal y otras dos para solucionar el problema en internet explorer: ie.css y ie7.css).

2 - Código fuente del ejemplo.

Este es el código fuente HTML para el menú.

<!DOCTYPE html>
<html lang="en">
<!--// Sección principal o cabecera de la página -->
<head>
<meta charset="utf-8">
<title>Crear menú de navegación utilizando HTML5, CSS3 y jQuery</title>
<!--// Incluir el archivo CSS3 principal -->
<link rel="stylesheet" href="css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--// Si se utiliza ie7, se cargan estos archivos css -->
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie.css">
<link rel="stylesheet" href="css/ie7.css">
<![endif]-->
</head>
<body class="no-js">
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</noscript>
<!--// Comienzo de la estructura del menú -->
<nav id="topNav">
<ul>
<li><a href="#" title="Ir a la página de inicio">Inicio</a></li>
<li><a href="#" title="Ver las categorías y secciones del sitio web">Categorías</a>
<ul>
<li><a href="#" title="Sub menú 1">ir al Sub menú 1</a></li>
<li><a href="#" title="Sub menú 2">Sub menú 2</a></li>
<li><a href="#" title="Sub menú 3">Sub menú 3</a></li>
<li><a href="#" title="Sub menú 4">Sub menú 4</a></li>
<li class="last"><a href="#" title="Sub menú 5">Sub menú 5</a></li>
</ul>
</li>
<li><a href="#" title="Clic aquí para buscar">Buscar</a></li>
<li><a href="#" title="Ir a la página web de contacto">Contacto</a></li>
<li class="last"><a href="#" title="Ir a la página web de novedades">Novedades</a></li>
</ul>
</nav>
<div class="content">
Aquí el resto del contenido de la página web.
</div>
<!--// Inclusión de los archivos Javascript -->
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
<script>
(function($){
var nav = $("#topNav");
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
</body>
</html>

Ahora, guardar la página anterior en la raíz del proyecto de ejemplo, por ejemplo con el nombre index.html.

En el código fuente anterior, en la sección HEAD, se enlaza a una hoja de estilos principal (nav.css) y también contiene una instrucción condicional para cargar un archivo javascript (html5.js) que permite solucionar el problema si la página se carga desde el internet explorer

En el cuerpo de la página tenemos el elemento <nav> como contenedor de una lista tradicional de enlaces HTML. El elemento no vuelve a crear un menú de navegación y tampoco incluye ningún elemento menuitem nuevo, por lo que se puede utilizar una lista desordenada sin ningún problema

Al final del cuerpo de la página ( Sección Body) se enlazan a los archivos de script jQuery y Modernizr. La librería Modernizr permite detectar las capacidades del navegador que utiliza el usuario añadir una serie de nombres de clase al elemento HTML, que se puede utilizar para agregar el código CSS3 y que sólo se aplica a los navegadores que pueden hacer uso de ellos.

También se ha añadido el nombre de clase no-js a la sección <body> de la página. Se hace esto por si JavaScript está no está activado, y poder de esta manera añadir otros estilos que sólo deben aplicarse cuando JavaScript no está habilitado en el navegador.

3 - Vista previa del menú.

Esta es una captura de pantalla del menú de navegación.

( El proyecto lo puedes descargar pulsando en este enlace)

 


Requerimientos de instalación y uso.

Este ejemplo requiere y necesita de : jQuery y librería modernizr.js.


Videos tutoriales.

No hay video tutoriales disponibles..

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://net.tutsplus.com
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: