Capítulo 1 - Páginas estáticas (Parte 07 de 09)

 7. Menú web

El menú de opciones es una parte integral de una aplicación web. El crearlo se vuelve bastante sencillo, si se utiliza la librería “jQuery”, por lo que primero se debe insertarlo en el código de la página con las siguientes sentencias:

La carpeta “menú” es la que contiene el plugin que ayuda a desarrollar la barra de menú; como se ve en el código siguiente, el menú es simplemente un conjunto de listas <ul> con divisiones <div> que pertenecen a una clase CSS determinada. El siguiente código genera un menú con sus opciones:

<div id="menu"> <ul class="menu" style="width: 100%"> <li><a href="#" class="parent"><span>Mis Datos</span></a> <div> <ul> <li><a href="#"><span>Cambiar Password</span></a></li> <li><a href="#"><span>Cerrar Sesi&oacute;n</span></a></li> </ul> </div> </li> <li> <a href="#" class="parent"><span>Categor&iacute;as</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </div> </li> <li><a href="#" class="parent"><span>Productos</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1</span></a></li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 3.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.1.1</span></a></li> <li><a href="#"><span>Sub Item 3.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 3.2</span></a></li> <li><a href="#"><span>Sub Item 3.3</span></a></li> <li><a href="#"><span>Sub Item 3.4</span></a></li> <li><a href="#"><span>Sub Item 3.5</span></a></li> <li><a href="#"><span>Sub Item 3.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.7.1</span></a></li> <li><a href="#"><span>Sub Item 3.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> <li class="last"> <a href="#"><span>Cerrar Sesi&oacute;n</span></a> </li> </ul> </div>