En este post, trabajaremos una parte que en ocasiones se nos hace un “mundo”, la creación de menús en nuestras aplicaciones web. Nuestro objetivo será evitar la utilización de elementos que puedan ocasionar que la página se vuelva un poco lenta, para ello utilizaremos jquery que viene siendo una herramienta muy semejante a ajax para crear nuestro menú.

Para crear nuestro menús de ejemplo necesitaremos de tres elementos:

1. CSS, para aplicar los estilos.

2. Jquery para realizar las animaciones.

3. Imágenes para armar los menús.

Nuestro primer Paso:

Será agregar la referencias a nuestra página, para incluir los CSS y los Scripts.

   1: <link rel="stylesheet" type="text/css" href="Styles/jquery.hrzAccordion.defaults.css" />

   2:    <link rel="stylesheet" type="text/css" href="Styles/jquery.hrzAccordion.examples.css" />

   3:    <script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
   1:  

   2:    <script type="text/javascript" src="JS/jquery.easing.1.3.js">

   1: </script>

   2:    <script type="text/javascript" src="JS/jquery.hrzAccordion.js">

   1: </script>

   2:    <script type="text/javascript" src="JS/jquery.hrzAccordion.examples.js">
</script>

Nuestro segundo paso:

Será la definición del html que contendrá los elementos de tipo imagen y el texto.

   1: <li>

   2:                        <div class="handle">

   3:                            <img src="images/title1.png" /></div>

   4:                        <img src="images/image_test.gif" align="left" />

   5:                        <h3>

   6:                            Contenido 1</h3>

   7:                        <p>

   8:                            Contenido de Ejemplo 1.<br>

   9:                            <br>

  10:                            Agregue todo el contenido aquí</p>

  11:                    </li>

En el código anterior, hemos definido un elemento que contendrá una imagen que se mostrará dentro del menú una vez desplegado. Una etiqueta H3 de html que tendrá el Título y un elemento <p> para definir el parrado de texto.

Como vemos es algo realmente sencillo. Si queremos agregar mas elementos, será nada mas copiar el div anterior y agregar nuevo contenido.

Al final, nuestro menú debe lucir algo así:

Por último, les dejo el ejemplo para descargar