EJEMPLO PÁGINA WEB CON MENÚS DESPLEGABLES
Para generar un menú desplegable utilizaremos la clase menu.css vista en el artículo anterior.
Lo que vamos a añadir son nuevas secciones o páginas web al sitio web, vamos a agregar en la página 1, 2 secciones llamadas página 1 A y página 1 B. En la página 2 colocaremos las secciones ejemplo1, ejemplo 2 y ejemplo 3. La página 3 no tendrá una sección desplegable.
Para lograr esto vamos a ingresar una nueva lista dentro del ítem seleccionado, en el caso de página 1, vamos a ingresar un <ul> y las otras secciones página 1 A y página 1 B estarán en etiquetas <li> cada una. Al finalizar se observa cómo se cierra </ul> para el listado desplegado y </li> para el ítem. De la misma manera se realiza para el ejemplo 1, 2 y 3.
El código es el siguiente.
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/menu.css">
<title>Ejemplo de menu desplegable</title></head>
<body bgcolor="#cddf89">
<font size="8" color="#987644" face="Tahoma">
Menú desplegable
</font><br><br>
<nav class="menu">
<font size="4">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Pagina 1</a>
<ul>
<li><a href="#">Pagina 1 A</a></li>
<li><a href="#">Pagina 1 B</a></li>
</ul></li>
<li><a href="#">Pagina 2</a>
<ul>
<li><a href="#">Ejemplo 1</a></li>
<li><a href="#">Ejemplo 2</a></li>
<li><a href="#">Ejemplo 3</a></li>
</ul></li>
<li><a href="#">Pagina 3</a></li>
</ul>
</font></nav>
</body></html>
Resultado:
NOTA FINAL:
Los menús son muy importantes porque permiten la navegación en tu sitio web, si tienes un sitio web basado en frames debes tener en cuenta que el atributo target de la etiqueta <a> el cual permite abrir el recurso o página web en el cuadro o frame nombrado en el target.
