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
