Esos menúes tipo tabs ó con subniveles tanto horizontales como verticales, son muy útiles al momento de desplegar grandes cantidades de navegación sin ser invasivos con el espacio. Puedes arquitecturar toda la estructura de tu sitio de manera tal que el usuario pueda encontrar fácilmente la información que desee, sólo con ir descubriendo con el mouse las subsecciones que están contenidas dentro del árbol general de navegación.
Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.
En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.
Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:
Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:
Quote
$(document).ready(function(){ // primero escondemos todos los subniveles $('li.cabeza > ul').hide(); // luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery $('li.cabeza').hover( function() { $('ul', this).show(); }, function() { $('ul', this).hide(); }); });
window.addEvent('domready', function() { // creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez. var list = $$('li.cabeza'); // luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none list.getElement('ul').setStyle('display', 'none'); // ahora agregamos los eventos de mouseenter y mouseout respectivos list.each(function(el) { el.addEvent('mouseenter', function(){ $(this).getElement('ul').setStyle('display', 'block'); }); el.addEvent('mouseleave', function(){ $(this).getElement('ul').setStyle('display', 'none'); }); }); });
Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Nos vamos a ahorrar el asignar identificadores y andar enviándolos a la función Javascript que nos maneje el asunto a base de manejarnos puramente usando el DOM. Cada vez que se llame a la función Javascript enviaremos como único parámetro el propio elemento que la llama usando la sentencia this que lo que hace es referenciarse o indicarse a sí mismo el objeto que dispara el evento.
Si a nuestra función la llamamos Menu(elementoQueLlama) y debemos pasarle el propio elemento que la llama como argumento lo haremos usando this
Y en nuestra función Javascript haremos lo siguiente: lo que queremos es mostrar u ocultar la lista anidada (ul) dentro del elemento del Apartado 1
Quote
<ul> <li onclick="Menu(this)"> Apartado 1 <ul> ... // ◄ -- este elemento queremos mostrar u ocultar
Aprovechando que todos los elementos donde hacer click y los elementos a ser mostrados u ocultados van a tener un patrón estructural común encontraremos al elemento sobre el cual actuar a partir del elemento que activa la llamada a la función y que se referencia a sí mismo mediante this Observamos que el ul que queremos abrir/cerrar está anidado dentro del elemento la que llama a la función, es decir, es un nodo dentro del elemento la que llama a la función.
• Nodo ul
o Nodo la con la llamada a Menu(this)
Nodo ul a mostrar u ocultar
El nodo ul a mostrar u ocultar (el tercero del esquema) es un nodo hijo del nodo la con la llamada a Menu(this) (el segundo del esquema).
El nodo li con la llamada a Menu(this) (el segundo del esquema) es el nodo padre del nodo ul a mostrar u ocultar.
Si a la función Javascript Menu(elementoQueLlama) le hacemos una llamada enviando la referencia del propio elemento que la llama como argumento con Menu(this) tendremos dentro de la función la referencia al elemento que la llamó dentro de la variable elementoQueLlama
Quote
function Menu(elementoQueLlama){ // elementoQueLlama guarda ahora al elemento que llamó a la función }
¿Y cuál es el elemento que queremos abrir o cerrar? El elemento ul que es un nodo hijo de elementoQueLlama Vamos a encontrar, lo primero, los elementos ul contenidos en elementoQueLlama usando el método del DOM getElementsByTagName()
Ahora tenemos en la variable elementosUlEnelementoQueLlama la lista de ul's que se encuentren dentro del elemento que llamó al script guardados en un array de 0 o más elementos (según lo que se haya encontrado dentro del elemento al que se le hizo click).
Este elemento ul que buscamos será el primer ul definido en elementoQueLlama así que accedemos a él mediante su posición en el array devuelto
Bueno, pues ya tenemos localizado el elemento que queremos abrir o cerrar en elementoQueQueremos. Ahora no tenemos más que asignarle la propiedad CSS display a none o a block. Vamos a usar los operadores condicionales para hacerlo:
Estupendo, no nos queda más que probarlo. Agregamos como atributo el manejador de eventos a los elementos la que deban encargarse de activar el script con la llamada a la función onclick="Menu(this)"
Quote
<li onclick="Menu(this)">Apartado 1 ...
¿Y si queremos anidar otro nivel ? ¿Qué pasa si queremos poner otro nivel de profundidad a nuestro menú? Pues sencillamente, que hará cosas raras.
• Apartado 1 o sección 1 Sección 1-b o sección 2 o sección 3 • Apartado 2 o sección 4 o sección 5 • Apartado 3 o sección 6 o sección 7 o sección 8
Nos encontramos con que al intentar abrir o cerrar Sección 1 lo que se activa además es el Apartado 1, es decir, el nodo padre de Sección 1.
¿Por qué sucede esto?
Pues es muy sencillo. El elemento la padre (Apartado 1) abarca a todo su contenido; eso incluye la lista anidada y la lista anidada dentro de ésta. De hecho en cualquier parte del área de Apartado 1 (eso incluye márgenes) se nos disparará la llamada a la función en el momento de hacer click. Así que cuando hacemos click en Sección 1 su elemento padre también está recogiendo el evento.
Lo que haremos entonces es cambiar el manejador de eventos a otro elemento que sólo afecte al texto en donde se deba hacer click.
Vamos a meter el texto clickable dentro de un tag strong. Podemos usar cualquier otro tag; si no queremos agregarle ningún sentido semántico a ese texto podemos usar un span pero en este ejemplo usaremos strong.
y ahora el elementoQueLlama ya no es el la, si no un tag strong hijo de este la y éste strong no contiene a ningún elemento ul, por lo tanto nos devuelve un array (lista) vacío.
La forma de solucionarlo es referenciar al li que nos interesa (el que teníamos referenciado en un principio). Para ello nada más fácil que indicar que queremos al padre del elementoQueLlama
Quote
elLiQueQueremos = elementoQueLlama.parentNode
Resumiendo el único cambio que debemos hacer a nuestra línea es este:
¡Listo! Ya tenemos de nuevo referenciado nuestro elemento para abrir o cerrar. Eso sí, algo importante es que el script funciona en base a un patrón estructural del menú; eso quiere decir que todos los elementos deben estar estructurados de la misma manera, o sea, llamando a la función desde algún tag que implique sólo al texto en donde hacer click y que ese tag sea hijo directo (no nieto) del la padre del ul con el que queramos interactuar.
Ahora bien, eso ha estado bien para describir el ejemplo. Yo le pondría unos nombres más sencillos a esas variables :-P y podríamos reducir a sólo dos líneas así
Menú y galería de imágenes tipo slide con CSS y HTML
Nosotros hemos visto ya como se puede simular algunos efectos dinámicos empleando solo CSS y HTML. En este post les proponemos simular un slide de imágenes para un menú vertical u horizontal o para una galería de imágenes. A continuación desarrollaremos el ejemplo con los códigos correspondientes explicados, de forma que se pueda comprender el funcionamiento y aplicarlo en la forma que se crea más conveniente.
Este efecto es más sencillo que los casos mostrados anteriormente, y nos muestra que para conseguir algunos efectos interesantes no es necesario utilizar códigos complejos, emplear scripts en otros lenguajes o utilizar animaciones. Basta con conocer los principios básicos de la maquetación y el potencial de las hojas de estilo en cascada y emplear un poco de imaginación.
Mientras preparamos los archivos para que puedan descargarlos y mostrar el ejemplo terminado para que lo puedan ver en funcionamiento, pueden copiar los códigos que se encuentran en el artículo.
Principio de funcionamiento El principio en el cual está basado este ejemplo, es mucho más simple que en los casos del menú desplegable y la galería de imágenes que hemos descrito en otros artículos, y se basa en el comportamiento de las capas flotantes y la utilización de la pseudoclase :hover.
La pseudoclase :hover se utiliza para modificar los parámetros de un elemento cuando el puntero pasa sobre él. Normalmente se le utiliza para que se modifique un enlace y cambie de color o cambie el subrayado cuando el puntero se posa sobre él. Pero también se pueden modificar otras propiedades, como las dimensiones (width y height, ancho y altura) de una imagen o una capa.
A continuación, les damos el código del archivo CSS, que se llamará “estilo.css” y se debe ubicar en el mismo directorio que la página “index.html”. En caso de querer renombrar el archivo o colocarlo dentro de un subdirectorio, como se hace normalmente, se debe modificar la ruta del enlace que se encuentra entre <head> y </head>.
Quote
/* CAPAS CONTENEDORAS */
#izquierda { width: 170px; float: left; }
.derecha { width: 750px; float: left; }
/* ELEMENTOS DEL MENU LATERAL */
#menu { padding:0; margin:0 auto; list-style-type:none; width:160px; height:312px; } #menu li a { height:30px; width:160px; float:left; border-bottom:2px solid #fff; overflow: hidden; } #menu li a img { border:0; } #menu li a:hover { height:120px; }
/* ELEMENTOS DEL MENU SUPERIOR */
#menu2 { padding:0; margin:0 auto; list-style-type:none; height:120px; width:354px; } #menu2 li a { width:30px; height:120px; float:left; border-right:2px solid #fff; overflow: hidden; } #menu2 li a img { border:0; } #menu2 li a:hover { background:#eee; width:160px; }
Explicación En primer lugar diremos que el ejemplo se encuentra dividido en tres capas flotantes, una a la izquierda, en forma de columna lateral, donde se ubica el ejemplo de menú vertical. A la derecha, dos capas contienen el menú horizontal y el ejemplo de una galería de imágenes, una arriba y la otra abajo. Las capas utilizadas utilizan un identificador (#izquierda) y una clase (.derecha) y son flotantes a la izquierda.
La capa contenedora En los menús y la galería se emplea el mismo código con leves modificaciones. En primer lugar, debemos limitar el tamaño de la capa que contiene el menú, que tiene el identificador #menu en el archivo CSS, lo que debe ser bien calculado ya que un error en esto puede originar fallas en el funcionamiento. El ancho de esta capa debe ser el ancho de las imágenes que se utilizarán, que en este caso es de 160 pixeles.
El cálculo debe hacerse en la altura de la capa contenedora. Colocaremos siete imágenes, que en su tamaño plegado tendrán 30 pixeles mas 2 pixeles del borde blanco, es decir, un total de 32 pixeles, y en su tamaño desplegado es de 120. Como el tamaño de la capa debe ser igual al de seis imágenes plegadas y una desplegada, el cálculo que se debe hacer es (6*32) + 120, lo que da un total de 312 pixeles.
Otras propiedades utilizadas son el margen, que en este caso es 0 auto, para que se centre en la capa contenedora; en esta capa también se determina que las listas no tendrán estilo de lista, para que no aparezcan los marcadores de ítems.
Los ítems En el caso de los menús, cada uno de los ítems de la lista contiene un enlace, por lo que para darles el formato a todos, utilizaremos #menu li a (formato del ítem que contiene un enlace dentro de la capa #menu).
Las propiedades que determinaremos son las de las imágenes contraídas, por lo que la altura será de 30 pixeles. Para que las capas se superpongan y no queden desplegadas (válido solo para los menús, ya que el caso de la galería tiene la diferencia que las imágenes contraídas están redimensionadas), es necesario que los ítems de menú sean flotantes, lo que queda indicado con la propiedad correspondiente.
Para ganar en efecto decorativo, se ha determinado que cada ítem de menú tenga un borde blanco de 2 pixeles. Luego, se determina que todo lo que sobresalga de las dimensiones de la capa quede invisible mediante la propiedad b“overflow:hidden”. De no colocarse, todas las imágenes quedarán en su tamaño original.
Imágenes con enlaces Las imágenes con enlace tienen por defecto un borde azul de 1 pixel, que debe ser eliminado para que el mismo no se vea, utilizando la propiedad “border: 0” en “#menu li a img”, es decir, en las imágenes con enlace en un ítem de menú dentro de la capa “#menu”.
Las imágenes desplegadas Cuando el puntero pasa o se posa sobre una de las imágenes contraídas, se activa la pseudoclase :hover, que en este caso determina que la altura de la imagen pase de los 30 pixeles a los 120 pixeles, que es la medida real de cada una de las imágenes utilizadas.
El efecto Cuando una de las imágenes contraídas, desplaza hacia abajo a las capas que se encuentran debajo de ella, excepto la última, que solo completa el espacio disponible en la capa #menu, haciendo que se parezca a un efecto slide rápido.
El menú horizontal El caso del menú horizontal es igual que el anterior, con la excepción que la capa base, en este caso #menu2, es más ancha que alta, al igual que las dimensiones de las imágenes contraídas, con lo que el desplazamiento forzosamente se realiza hacia la derecha. El cálculo de las dimensiones de la capa #menu2 debe realizarse con el ancho de las imágenes, en lugar de la altura como en el caso anterior. Otra diferencia, es que el borde de la capa contraída está a la izquierda.
La galería de imágenes La galería de imágenes es igual al ejemplo del menú horizontal (puede hacerse también con desplazamiento vertical), con la excepción de que no contiene enlaces, con lo que el código cambia ligeramente.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
En este post les mostraré cómo crear un menú hecho sólo a base de imágenes, precargadas (sin javascript) y amigable con los buscadores. Este método se llama CSS Sprites, y lo recomiendo muchísimo a todos porque yo estoy seguro de que a más de uno le ha pasado que cuando pasan el mouse sobre un menú que es de imágenes o que tiene una imagen de fondo, se debe esperar 1 o 2 segundos a que la imagen del rollover cargue. Eso en lo personal me parece molesto porque interfiere en mi experiencia de usuario; al precargar las imágenes le ofrecemos al usuario una experiencia más placentera. Y más adelante les mostraré cómo este método también es muy útil para Aplicaciones Web cuya presentación es en html/xhtml, así que a los desarrolladores les va a interesar puesto que optimiza la carga de aplicaciones.
Los Sprites Primero ¿qué son los Sprites? Si dan una búsqueda por Google verán que se trata de una gran imagen que contiene más imágenes pequeñas dentro. Los Sprites eran usados en los videojuegos antiguos de 2D, esos que tenían pocos colores, para tener cargados a sus personajes y mediante sus algoritmos de programación se movían dentro de esta gran imagen y daba como resultado el personaje moviéndose, corriendo, etc. Este es un ejemplo de sprites del famosísimo juego Mario Bros:
Pueden leer mas sobre la definición de sprites en Wikipedia
Entonces ¿qué tienen que ver los sprites con CSS? Bastante, pues les diré que esta antigua técnica nos ayuda a nosotros los diseñadores y/o desarrolladores a optimizar la carga de nuestras páginas web, y se los voy a demostrar con el ejemplo de crear un menú.
Preparando la imagen Esta es la parte más importante, es lo que nos dará esa precarga de imágenes que queremos. Volviendo al concepto de Sprites, lo que nos quiere decir es que en una imagen se tienen todas las imágenes que se usarán, para este caso, en una sola imagen tendré todos los estados del menú, el estado normal, el sobre o rollover, y el activo.
La siguiente es la imagen que usaré para mi ejemplo:
La imagen real tiene una dimensión de 702px de ancho x 108px de alto y pesa 9.21KB, la primera sección es el estado normal, la del medio es el rollover y el último es el estado activo, el que me dice en qué sección de la página estoy.
El menú en la página web tendrá solamente 36px de alto, entonces como se habrán dado cuenta si separan cada sección de la imagen, cada una es de 36px de alto, 36*3=108px
Esa es la idea, cuando ustedes empiecen a cortar su diseño, coloquen en un solo archivo todos los estados de su menú.
Hay que tomar nota del ancho para cada botón en esa imagen, yo usé las guías del photoshop y a partir de ahí medí el ancho para cada botón.
Preparando el XHTML Entonces creamos la clásica lista para nuestro menú.
Código:
Quote
<ul class="menuholder"> <li class="menu_intro"><a href="#" title="Introduction" class="active">Introduction</a></li> <li class="menu_book"><a href="#" title="The Book">The Book</a></li> <li class="menu_testi"><a href="#" title="Testimonials">Testimonials</a></li> <li class="menu_what"><a href="#" title="What You Will Get">What You Will Get</a></li> <li class="menu_buy"><a href="#" title="Buy Now">Buy Now</a></li> </ul>
Notar que cada link tiene su respectivo atributo title y que se ha mantenido el texto dentro del link <a>, esto es para que sea accesible y amigable con los buscadores.
Es importante que cada <li> llame a una clase distinta, y colocar una clase llamada "active" a la opción del menú que se desea mostrar como activa.
Y bueno como ven la parte del html es la más fácil no hay mucha ciencia, ahora pasaremos a la hoja de estilos.
El CSS OK, primero asegúrense de tener un Reset en su archivo CSS. Para fines de este tip usaré el siguiente:
Ahora vamos a definir ciertos parámetros para la clase "menuholder" que es el <ul> que encierra el menú.
Código:
Quote
.menuholder {background:url(images/bgmenu.gif) #dd0069;} /*opcional*/ .menuholder li {float:left;} .menuholder a {background:url(images/menu-options.gif);display:block; height:36px; text-indent:-9000%}
En la primera línea estoy colocándole un fondo fucsia con una pequeñísima imágen de 1px de ancho por 36px de alto. Esto es para que salga de frente un fondo fucsia en mi menú rápido mientras cargan la imágen del menú. Esto es opcionanal pero la considero una buena práctica.
En la segunda línea hago que los elementos <li> dentro de .menuholder tengan float:leftb para que salgan todos en fila, en una sola línea, ya no como una lista hacia abajo.
En la tercera línea finalmente vemos que todos los links <a> dentro de .menuholder tendán de imágen de fondo menu-options.gif que es nuestra gran imagen con todos los estado. Se le define un display: block para que se le puedan aplicar el ancho y el alto a cada link, lo que sigue justamente es el alto de 36px ya que cada link tiene el mismo alto lo ponemos aquí y el text-indent moverá el texto dentro de los links bien lejos para que no se vean sobre el menú.
Ahora sí viene lo bueno, este es resto del CSS, que se encargará de posicionar la imagen de fondo en cada estado del menú:
Código:
Quote
/*ESTADO NORMAL*/ .menu_intro a {width:155px;} .menu_book a {width:107px; background-position:-155px 0px;} .menu_testi a {width:134px; background-position:-262px 0px;} .menu_what a {width:176px; background-position:-396px 0px;} .menu_buy a {width:130px; background-position:-572px 0px;}
¿Recuerdan que tomamos nota de los anchos? Bueno aquí es donde se usan, en la primera sección donde están los estados normales, se especifica el ancho de cada link, notar que estoy poniendo el nombre de la clase y luego la etiqueta de link <a>, porque es al link que esta dentro de la clase al que estoy aplicando todas estas definiciones. Luego juego con la posición del fondo, como ven sólo estoy moviendo las posiciones horizontales (eje X), en el primero no le especifiqué porque un fondo por defecto esta en la coordenada 0,0 así que no es necesario escribir la posición en este caso en particular.
Para el estado rollover muevo todos los backgrounds en el eje Y a -36px para que pase a la sección media de la imagen donde están todas mis imágenes de rollover, las posiciones horizontales se mantienen.
Y por ultimo el estado activo, muevo los backgrounds 36px más, es decir -72px en el eje Y para que se puedan ver los estados activos, y nuevamente mantengo los del eje X. Notar que la etiqueta <a> esta definiendo una clase "active" esto se coloca en el link <a> que se desea mostrar activo y en este caso es el primer botón del menú. ¡Y ya está!
Eso es todo, espero que hayan entendido, pueden ver el ejemplo en línea y descargar este ejemplo (notar que no hay retraso al mostrar las imágenes del menú)
Tip para desarrolladores Este método no se limita solamente a menús en páginas web, esto ayuda bastante en la optimización de aplicaciones web también, ya que evitamos constantes conexiones al servidor cada vez que se necesite un icono, imagen, fondo, etc. Las aplicaciones web utilizan bastantes iconos, les pongo el ejemplo de Yahoo! Mail, ellos usan este método para sus iconos y fondos de los tabs, esta es una pequeñísima parte de la gran imagen que ellos usan para sus iconos, la original es de 3050px de ancho x 101px de alto, y pesa tan sólo 31kb:
Y usan otra gran imagen para el fondo de sus tabs también.
Como ven este método es muy útil, úsenlo sabiamente donde lo vean necesario, especialmente en imágenes estáticas que saben que van a ser llamadas una y otra vez.
Espero que esta información les sirva para proyectos futuros. [/size]
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Seguramente algunas vez visitamos el sitio web de Adobe, y una de las cosas que más nos llaman la atención es el efecto acordion que se usa para reducir el espacio necesario para mostrar alguna parte de nuestro sitio, y que en el caso de Adobe se usa para que en lugar de tener una tabla con 3 celdas en fila vertical, que corresponden a las secciones: Productos, Soluciones y Sectores; se pueda usar un acordion que al pasar el mouse sobre una sección, esta se expanda y al pasarlo sobre otra suceda lo mismo pero la anterior se vuelve a contraer.
Si no sabes a que me refiero puedes ver el efecto desde la web de Adobe.
¿Cómo es que nos ayuda este componente?
El componente Accordion (como se nombra en inglés) nos ayuda al momento de tener una gran cantidad de contenido que mostrar, como una lista de links recomendados o las categorías de nuestro blog o sitio, o simplemente para darle un aspecto más elegante a nuestro página web.
Acerca de La versión de este componente usado en la página de Adobe es la 2007 (ó 2008 no recuerdo bien), la cual esta protegida por una licencia, por lo que sería un delito usarla sin permiso de Adobe.
Pero al menos se encuentra disponible la versión 2006 en estado libre, la cual usaremos para este tip, esta versión es posible descargarla desde Adobe Labs, pero para que te ahorres esta descarga, les dejo los códigos necesarios para su uso. La única desventaja es que se debe dar click sobre la sección para que se expanda.
Usar el componente Pues luego de todo lo anterior procedamos a crear este efecto.
Primero que nada, al descargar el componente desde Adobe Labs tendríamos 3 archivos:
El primero es la hoja de estilos que define los colores entre otras cosas de cada panel.
El segundo es el que realiza prácticamente todo el trabajo sucio, es un código JavaScript.
El tercero es solo el documento HTML en el que se da el ejemplo para visualizarlo desde el navegador.
Antes de abrir el Dreamweaver debemos de crear una carpeta nueva dentro de cualquier lugar de nuestra PC, esta la llamaremos "Accordion"; solo para tener las cosas en un solo lugar.
Ahora si abrimos el Dreamweaver (o incluso si no lo tienen bastará con usar el Bloc de notas) y creamos una nueva hoja de estilos en cascada (CSS)
Y agregamos el siguiente código:
Quote
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Aquí se define el estilo para el contenedor del Accordion. Como estilo * predeterminado, se dibujan bordes por la izquierda, derecha y abajo. El borde * de la parte de arriba se define por el primer panel en AccordionPanelTab, que * es el de mero arriba, el que nunca se mueve. */ .Accordion { border-left: solid 1px gray; border-right: solid 1px black; border-bottom: solid 1px gray; overflow: hidden; }
/* Aquí se define el AccordionPanel, es decir el panel que contiene todas * las cosas que ponemos. Aunque no tiene ningún aspecto gráfico * es necesario dejarlo en claro que debe de tener 0 en margin y padding. */ .AccordionPanel { margin: 0px; padding: 0px; }
/* Aquí se define el AccordionPanelTab, la pestaña que lleva el título * del panel y donde se detecta el click para abrir cualquier panel.
/* Aquí se define el AccordionPanelContent, donde se encuentra el contenido del panel. * Es importante saber que no se debe de poner ningún padding nunca al area que * del contenido del panel para usar las animaciones. Siempre se debe de poner 0px * de padding, porque si no la altura de los paneles se cambian al animarse la expansión. * * Cualquiera que estilize un acordion, debe de establecer la altura en el * contenedor con la clase "AccordionPanelContent" */ .AccordionPanelContent { overflow: auto; margin: 0px; padding: 0px; height: 200px; color: #000; }
/* Este es un ejemplo de como cambiar la apariencia de la pestaña de un panel abierto. * La clase "AccordionPanelOpen" es agregada y removida a el panel según el usuario * haga click sobre la pestaña del acordion. */ .AccordionPanelOpen .AccordionPanelTab { background-color:#666; font-size: 14px; }
/* Este es un ejemplo de como cambiar la apariencia de la pestaña del panel cuando * el mouse se coloca sobre ella. El nombre de clase "AccordionPanelTabHover" es * agregada y removida de forma programada a las pestañas del panel en mientras el mouse * haya abierto un panel. En este caso, yo configuré la CSS a mi gusto, y deje el mismo * color (#CCC) para el panel abierto al hacerle over, que a los que quedan cerrados; * pero si lo deseas puedes optar por cambiarlo. */ .AccordionPanelTabHover { color: #CCC; } .AccordionPanelOpen .AccordionPanelTabHover { color: #CCC; }
/* Este es un ejemplo de como personalizar la apariencia de todas las pestañas del panel /* mientras estemos enfocados en el Accordion. La clase "AccordionFocused" es agregada /* y removida de forma programada al Accordion al detectarse que se use o no. /* En esta ocasion también puse el mismo color (#333) al estar usandose o no el acordion. /* pero si lo deseas puedes cambiarlo. */ .AccordionFocused .AccordionPanelTab { background-color: #333; }
/* Este es un ejemplo de como puede cambiarse la apariencia de la pestaña de panel que esta /* abierto mientras el panel este en uso. * Por cuestion de gustos también deje el color (#666) igual al estar en uso el acordion y * al no estarlo */ .AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #666; } [/css]
Iba a explicar cada función de las clases que se especifican, pero me di cuenta de que eran muchas y resultaría muy confuso buscarlas entre el código, así que la explicación la puse junto al código.
Nota: Es importante que leas los comentarios añadidos al código para que veas algunas reglas básicas en el diseño del componente, y su correcta función.
No es importante su nombre de clase para que el efecto funcione de forma correcta, puedes usar cualquier otro nombre de clase para darle estilo.
Y en todas las partes donde menciono que son solo ejemplos de personalizar el componente Accordion, son solo si queremos definir o personalizar mas el componente. Pero no es necesario que se haga uso de ellos.
En la definición de la clase .AccordionPanelTab se usan las propiedades "-moz-user-select" y "-khtml-user-select" para evitar que el usuario pueda seleccionar el texto en AccordionPanelTab (las pestañas del acordion). Esas propiedades de los navegadores solo funcionan en navegadores basados en Mozilla (como Firefox) y también en los que se basan en KHTML (como Safari), pero no pasan la validación de W3C. Si quieres usarlo y que sea válido el código, y no te importa si se puede seleccionar el texto que esta en las pestañas del acordion puedes remover esas 2 líneas, y no se dañará el componente ni sus funciones.
Dejando en claro todo lo anterior, y con nuestro código bien definido y/o corregido procedemos a guardar nuestro documento con el nombre: SpryAccordion y su respectiva extensión (.css)
Ahora procedamos al código JavaScript (JS), el cual posee una declaración sobre derechos de autor etcétera, etcétera, etcétera... en los comentarios. Por lo que les aviso que na vayan a usarlo sin cumplir sus condiciones, las cuales removí para el tip, pero que si desean modificarlo considero que deberán leer el código original desde aquí.
Con respecto al código JavaScript les tengo una mala noticia:
...
Por desgracia no se JS
Y me había propuesto darle un breve analisis al código a ver si entendía algo, pero con solo ver la extensión del código me dio miedo
Así que aquí se los dejo tal cual es (omitiendo lo de la declaración de derechos de autor).
Creamos un nuevo documento de JavaScript y pegamos el siguiente código:
Spry.Widget.Accordion.prototype.closePanel = function() { // The accordion can only ever have one panel open at any // give time, so this method only closes the current panel. // If the accordion is in fixed panel heights mode, this // method does nothing.
if (!this.useFixedPanelHeights && this.currentPanel) { var panel = this.currentPanel; var content = this.getPanelContent(panel); if (content) { if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { content.style.display = "none"; content.style.height = "0px"; } } this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.currentPanel = null; } };
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) { var content = this.getPanelContent(panel); if (isDefault) { this.currentPanel = panel; this.removeClassName(panel, this.closedClass); this.addClassName(panel, this.openClass);
// Attempt to set up the height of the default panel. We don't want to // do any dynamic panel height calculations here because our accordion // or one of its parent containers may be display:none.
if (content) { if (this.useFixedPanelHeights) { // We are in fixed panel height mode and the user passed in // a panel height for us to use.
if (this.fixedPanelHeight) content.style.height = this.fixedPanelHeight + "px"; } else { // We are in variable panel height mode, but since we can't // calculate the panel height here, we just set the height to // auto so that it expands to show all of its content.
Spry.Widget.Accordion.prototype.attachBehaviors = function() { var panels = this.getPanels(); for (var i = 0; i < panels.length; i++) this.initPanel(panels[i], i == this.defaultPanel);
// Advanced keyboard navigation requires the tabindex attribute // on the top-level element.
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer);
// If we're killing the timer, restore the overflow // properties on the panels we were animating!
for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; obj.content.style.overflow = obj.overflow; } }
this.timer = null; };
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration) { for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; if (obj.panel != this.panel) { obj.content.style.display = "none"; obj.content.style.height = "0px"; } obj.content.style.overflow = obj.overflow; obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto"; } if (this.onComplete) this.onComplete(); return; }
for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); obj.content.style.height = ((ht < 0) ? 0 : ht) + "px"; }
Si alguien aquí sabe JS y se atreviese a explicar el código anterior, creo que ya tiene una buena razón para escribir un tip sobre esto. Lo guardamos como SpryAccordion con la extensión de un código JavaScript (.js)
Pues ahora pasemos al documento HTML.
Creamos un nuevo documento HTML, y pegamos el siguiente código:
Quote
Spry Accordion
Panel 1
Aquí va el contenido del panel 1
Panel 2
Aquí va el contenido del panel 2
Panel 3
Aquí va el contenido del panel 3
Panel 4
Aquí va el contenido del panel 4
Guardamos el archivo como SpryAccordion con la extensión (.html).
El código también lo explico en él.
El resultado final lo puedes visualizar desde aquí
Hay que tomar en cuenta algunas cosas como por ejemplo que es el DOM (Modelo de Objetos del Documento). El DOM se conforma de todas tus etiquetas desde <html> hasta </html>. Todo lo que este dentro de estas etiquetas representa el DOM y Jquery se ejecuta muchas veces hasta que el DOM esta completamente cargado, esto lo podemos ver porque encontraremos en la estructura algo como esto:
Quote
$(document).ready(function() { //aqui escribes tu codigo } O podras ver tambien… $(function(){ //aqui escribes tu codigo });
Y se preguntaran bien y de donde veo mas ejemplos o donde bajo esta librería pues desde este link www.jquery.com
Jquery ha sacado librerías para poder personalizar los aburridos componentes como los List, Radio, Checkbox, entre otras cosas.
Supongamos que queremos hacer rollover de un div y que debajo de el aparezca otro.
Abriremos un archivo ya sea HTML o PHP como ustedes gusten, luego dentro de <body> vamos a crear 3 DIVS con su respectivo ID y el CSS, a estos dos DIVS vamos a ponerles un color de fondo diferente.
Código:
Quote
div#uno a { background-color:#993300; width:20px; height:20px; display:block; } div#Cont_serv { width:20px; height:20px; display:none; // NOTA VEASE QUE ESTE ID CONTIENE UN DISPLAY:NONE ESTO QUIERE DECIR QUE ES EL OBJETO AFECTAR Y LO // NECESITAMOS EN PRINCIPIO OCULTO y dentro de el tendremos el DIV con ID dos. } div#dos a { background-color:#009999; width:20px; height:20px; display:block; } <body> <div id=”contMenu” style=”width:350px; height:20px;”> <div id=”uno”><a href=”javascript:void(0);”></a></div></div> <div id=”Cont_serv”> <div id=”dos”><a href=”javascript:void(0);”></a></div> </div> </body>
Debemos importar nuestra librería Jquery antes de la etiqueta de cierre del </head>]:
Ya teniendo agregada la librería pasaremos a construir la función del Jquery para que esta sea Ejecutada cuando nuestro Navegador haya terminado de leer o cargar el DOM. Cabe mencionar que esta función va dentro de las etiquetas <script></script> ya que siguen siendo códigos de Javascript.
Código:
Quote
<script language=”javascript” type=”text/javascript”> $(function(){ //aqui escribes tu codigo }); </script>
Ahora dentro de nuestra funcion vamos a poner lo siguiente:
Te preguntarás que es eso que esta declarado en la función, es la sentencia en Jquery para poder aparecer el otro div.
La primera parte de esta sentencia es $(’#uno a’), bien aquí es donde vamos a definir a que DIV (o mejor llamado OBJETO ) le vamos a dar la instrucción de que aparezca el otro DIV oculto, es importante poner siempre el ID del objeto entre comillas simples o dobles da igual pero también debe tener el símbolo de #.
La segunda parte de esta sentencia se te hará conocida .mouseover, aquí le estamos indicando que cuando el mouse pase por encima del DIV $(’#uno a’). se va ejecutar lo que seria la función de
Como podrán observar dentro de los paréntesis del .mouseover(), hay una function que la que hará que el otro DIV aparezca tengan mucho cuidado con los signos de cierre porque luego se les escapa una llave o un paréntesis y no se ejecutara correctamente el código, bien como podrán ver dentro de la función nos encontramos de nuevo con $(”#Cont_serv”), pues aquí le decimos a que div vamos aparecer y el .fadeIn(”slow”), es el modo en que aparecerá el otro objeto.
Ya lo hicimos aparecer ahora queremos que desaparezca al salir del objeto que lo manda aparecer bien solo agregamos la siguientes linea
OJO si no saben donde pondrán este código sera después del ultimo paréntesis de cierre de .onmouse().mouseout() es por eso que les comento que hay que tener cuidado el ejercicio quedaría así:
Ahora continuamos con la Segunda parte, la cual consiste en que el DIV de que aparece al poner cursor sobre de el este no desaparezca.
Para ello necesitamos analizar la situación, necesitamos detener o cancelar la acción del .mouseout, asi que pues una forma de poder hacer esto es usar un intervalo y de una variable boolean.
Fuera de la función que se ejecuta al terminar de cargar el DOM, vamos a declarar dos variables:
Código:
Quote
var myInterval; var VAL = false;
Acto seguido en nuestra función de .mouseover vamos a sustituir el:
Código:
Quote
$(”#Cont_serv”).fadeOut(”slow”)
ahora vamos a poner:
Código:
Quote
VAL = true; activeInterval();
Aquí le vamos a decir que al momento de sacar el mouse de nuestro DIV vamos a cambiar el valor de la Variable VAL a TRUE y vamos a llamar a una FUNCION llamada activeInterval, esta función se encuentra fuera de la función Jquery Seria así:
Código:
Quote
function activeInterval(){ if(VAL==true){ myInterval = setInterval(remover,100); } }
Como podrán apreciar validamos si VAL es igual a true, entonces ejecutamos el setInterval, (para los que no conozcan el setInterval es una función de ciclo cada determinado tiempo ), el setInterval está asignado a nuestra variable myInterval y el setInterval consta de dos parámetros. El primero es donde tenemos la palabra remover que esta es una función y el numero 100 que es el tiempo en milisegundos que tarda en ejecutarse el setInterval.
Así que cuando hagamos mouseout cambiamos el valor de VAL y ejecutamos activeInterval. Ahora vamos a detener el intervalo porque necesitamos hacerlo cada 100 milisegundos. El intervalo se estará ejecutando bien, dentro de nuestra función de Jquery vamos agregarle al DIV que estamos haciendo que aparezca los métodos de mouseover y mouseout, de la siguiente manera:
Al hacer mouseover cancelamos el intervalo con clearInterval. Llamamos a la variable que contiene el setInterval y que al mouseout de este objeto volvemos a llamar la función que contiene el intervalo. Nos hace falta una función por explicar.
La función remover el código que le extrajimos originalmente a la instrucción mouseout:
Código:
Quote
function remover(){ clearInterval(myInterval); $(”#Cont_serv”).fadeOut(”slow”); }
Al llamar la función, lo primero que hace es cancelar el intervalo y luego hacemos el fadeOut del objeto. Así fácil y sencillo. Cabe mencionar que esta estructura puede servir para hacer lo mismo con AS2 y AS3 obviamente con sus respectivas sentencias de cada lenguaje.
En este tutorial vamos a crear un menú en css animado para tu sitio web.
Paso 1 En este paso que es sencillo vamos a crear nuestra lista de menú en nuestro documento HTML que debe ser algo así como el código que mostramos, lógicamente con las opciones del menú que tu desees.
Paso 4 Ahora agregamos este código debajo del código anterior
Quote
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item... var linkText = $(this).find("a").html(); //Find the text inside of the a tag $(this).find("span").show().html(linkText); //Add the text in the span tag });
$("#topnav li").hover(function() { //On hover... $(this).find("span").stop().animate({ marginTop: "-40" //Find the span tag and move it up 40 pixels }, 250); } , function() { //On hover out... $(this).find("span").stop().animate({ marginTop: "0" //Move the span back to its original state (0px) }, 250); });
}); </script>
Paso 5 En el zip de nuestro ejemplo adjuntamos un archivo llamado “a_bg.gif” que puedes editar y cambiar el color en photoshop.
Eso es todo! con esto ya tenemos nuestro menú animado.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
PASO 2 Con el comando Ctrl + S guardamos nuestro documento con el nombre de menu desplegable.html
PASO 3 Vamos a la ventana Insert – Layout – Spay Menu Bar
PASO 4 Nos aparece la ventana Spry Menu Bar y escogemos la opción que se ajuste a nuestras necesidades en este caso escogeremos un menú horizontal.
PASO 5 Nos aparece como se muestra en la imagen, un menú con 4 Items para poder modificar a nuestro gusto.
PASO 6 En la ventana Properties cambiamos los nombres de los menús principales y secundarios, agregamos links a nuestros botones y agregamos más menús.
PASO 7 Ya tenemos nuestro menú terminado solo para colocarle un diseño bonito.
PASO 8 Si nos damos cuenta en la parte derecha en la ventana CSS Styles vemos que nuestro menú tiene aplicado un css entonces ahí podemos editar colores, tipo de letra y agregare todas las modificaciones necesarias para obtener un menú machismo mejor.
Vamos a crear un menú formado por barras verticales que estarán formados por una imagen que bajará desde arriba cuando se pase el puntero del ratón por su correspondiente barra. Además cada barra vertical tendrá varias opciones que subirán desde abajo al pasar el ratón por su barra correspondiente.
Cuando pulsemos en una de estas opciones, el resto de barras verticales desaparecerán, y la barra pulsada se situará a la izquierda, y a su derecha tendremos una capa con información de la opción pulsada.
También tendremos un botón para volver el menú principal.
Empezaremos por crear el menú vertical con código HTML.
Al primer elemento del menú, le pondremos la propiedad de estilos z-index con un valor de 5, cuyo valor iremos decrementando en las siguientes opciones del menú. Con esto conseguimos que el último elemento esté en la capa más baja. Hacemos esto para crear el efecto de colapso de cartas.
Cada elemento del submenú compartirá la clase con su respectivo contenedor div. De esta forma, nosotros podremos hacer que el contenedor aparezca a la derecha cuando se pulse una opción del submenú.
A continuación veremos los estilos.
El div principal, .cc_menu, que rodeará al resto de elementos del menú tendrá el siguiente estilo.
El ancho del contenedor es la suma de todos los anchos de las distintas opciones que tiene el menú. Si a cada una le damos el valor de 140 px, habrá que multiplicar eso por el número de opciones.
Los estilos de cada elemento de la navegación es el siguiente:
A cada elemento le asignamos un box shadow para que la capa llegue a ser visible. En IE esto no funciona, por lo que habría que ponerle alguna imagen que hiciera el mismo efecto.
El título de cada elemento del menú tendrá un fondo oscuro con una delgada sombra alrededor.
A la propiedad bottom del elemento y a su altura le asignamos el valor 0 para que esté oculto, para luego incrementar su altura en 200 pixels y crear así el efecto de aparición desde abajo.
La lista de elementos del submenú tendrá los siguientes estilos:
Quote
.cc_submenu ul li{ color:#ddd; cursor:pointer; padding:10px; }
La imagen que sale desde la parte de arriba, tendrá un valor negativo en su propiedad top, de esta forma estará oculta. Luego mediante código javascript, a la propiedad top le asignaremos un valor de 0 para crear el efecto de aparecer desde arriba. Los estilos completos son los siguientes:
El contenedor que rodea a todos los elementos también le damos un valor left negativo para que se muestre oculto y luego hacerlo visible mediante javascript. Los estilos para esto son los siguientes.
Después de ver los estilos, vamos a ver como darle animación utilizando la librería jQuery.
Vamos a tener varias funciones que gestionarán el funcionamiento de nuestra navegación. Cada vez que nos situemos en un elemento de menú, queremos que la imagen se deslice desde la parte superior y el submenú se deslice desde la parte inferior. Y por supuesto, cuando salimos de una opción queremos el efecto contrario. Las funciones “m_enter” y “m_leave” se encargarán de ese funcionamiento.
La función “fold” hará que el menú se colapse cada vez que un elemento del menú es pulsado. La posición inicial es recuperada por la función “unfold”.
Las dos funciones “showContent” y “hideContent”, serán las encargadas de hacer que aparezcan o desaparezcan el contenido de los respectivos contenedores.
En nuestro código jQuery tendremos definidas algunas funciones:
Quote
//all the menu items var $items = $('#cc_menu .cc_item'); //number of menu items var cnt_items = $items.length; //if menu is expanded then folded is true var folded = false; //timeout to trigger the mouseenter event on the menu items var menu_time;
Ahora vamos a definir lo que sucederá cuando se lancen los eventos mouseenter y mouseleave para cada elemento. También definiremos las acciones cuando se hace clic en el elemento.
Quote
$items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave) .find('.cc_submenu > ul > li') .bind('click',function(){ var $li_e = $(this); //if the menu is already folded, //just replace the content if(folded){ hideContent(); showContent($li_e.attr('class')); } else //fold and show the content fold($li_e); });
El código siguiente corresponde a la definición de la función “m_enter”.
Quote
function m_enter(){ var $this = $(this); clearTimeout(menu_time); menu_time = setTimeout(function(){ //img $this.find('img').stop().animate({'top':'0px'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400); },200); }
El timeout es utilizado para prevenir a este evento si se muevo el ratón de forma rápida por los distintos elementos del menú.
La función “m_leave” está definida de la siguiente forma:
Quote
function m_leave(){ var $this = $(this); clearTimeout(menu_time); //img $this.find('img').stop().animate({'top':'-600px'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400); }
Cuando pulsemos en el botón de volver al menú, queremos que se lance la función “unfold”.
Quote
$('#cc_back').bind('click',unfold);
La función “fold” solo mostrará el menú de la columna que hayamos seleccionado, y hacemos que el resto de elementos se vayan a la izquierda asignándole el valor de -140 pixels al margin.
Quote
function fold($li_e){ var $item = $li_e.closest('.cc_item');
var d = 100; var step = 0; $items.unbind('mouseenter mouseleave'); $items.not($item).each(function(){ var $item = $(this); $item.stop().animate({ 'marginLeft':'-140px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = true; showContent($li_e.attr('class')); } }); }); }
La función “unfold” muestra todos los elementos del menú y también oculta las imágenes y el submenú que estaban siendo mostrados.
Quote
function unfold(){ $('#cc_content').stop().animate({'left':'-700px'},600,function(){ var d = 100; var step = 0; $items.each(function(){ var $item = $(this);
La función para mostrar el contenido de nuestro contenedor a la derecha, asignándole el valor de 140 px a la propiedad left.
Quote
function showContent(idx){ $('#cc_content').stop().animate({'left':'140px'},200,function(){ $(this).find('.'+idx).fadeIn(); }); }
Por último la función de ocultar el contenido
function hideContent(){ $('#cc_content').find('div').hide(); } Para el tema de las fuentes de nuestro menú, nos limitaremos a añadir las siguientes líneas en la cabecera de nuestros html.
Vamos a crear un menú donde al situarnos por las opciones, el texto se cambiará por una imagen, deslizándose la opción seleccionada para abajo y mostrando más opciones aquellos que tengan opciones añadidas.
Para conseguir este efecto, haremos uso del plugin para jQuery Easing Plugin.
Vamos a empezar con el código HTML. Para ello utilizaremos una lista desordenada, colocada de forma horizontal. En esta lista meteremos todos los elementos que tengan nuestro menú. Si además la opción seleccionada tiene un menú extra con otras opciones, entonces le añadimos una capa con esas opciones. La imagen que acompaña a cada opción no se mostrará al principio, sino que se hará una vez que se pase por encima de la opción.
Lo siguiente que hacemos es dar los estilos a la imagen. Recordemos que esta estará oculta al principio y que solo aparecerá cuando pasemos por encima de la opción.
Los estilos para el contenedor del título y de la descripción les daremos los siguientes estilos:
Quote
ul.sdt_menu li span.sdt_wrap{ position:absolute; top:25px; left:0px; width:170px; height:60px; z-index:15; }
Lo próximo que hacemos es definir los estilos para la caja que se desplaza hacia abajo. Nosotros le asignamos un valor de 0 para la altura y por medio de la animación le indicaremos la altura que se necesita.
Crear un menú desplegable utilizando listas y Jquery
Vamos a ver la forma de crear un menú desplegable elegante utilizando HTML, CSS y un poco de Jquery. En nuestro menú desplegable no hará falta pulsar en el menú para mostrar las opciones, bastará con pasar el ratón por encima del control.
Los distintos elementos del menú estarán formados por una lista, y cada elemento de la lista será un enlace hacia otra sección.
La apariencia final del menú, será el de la imagen.
Lo primero es crear la estructura html del menú.
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo crear un menú de pestañas elegante en jQuery</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" /> </head> <body> <div class="wrapper"> <h1>Creando un menú desplegable en jQuery</h1> <ul class="dropdown"> <li class="active">Visualizando: <span>Tutoriales</span></li> <li class="first"><a href="#">Recursos</a></li> <li><a href="#">Inspiración</a></li> <li><a href="#">Contacto</a></li> <li class="last"><a href="#">Ver más...</a></li> </ul> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
Con este código, tendremos algo similar a esta imagen.
Lo siguiente que hacemos es darle algo de estilos.
//funcion que MUESTRA todos los elementos del menu function displayOptions(e){ e.show(); } //funcion que OCULTA los elementos del menu function hideOptions(e){ e.find("li").hide(); e.find("li.active").show(); }
El código es sencillo. Lo primero que hacemos en el código es obtener una referencia hacia nuestro elemento que actuará como menú desplegable. Esto lo almacenamos en la variable “menu”.
A continuación tenemos el código que hará de controlador de los eventos, y según lo que pase, irá a una función o a otra.
Si se pasa el ratón por encima de la primera opción del menú, entonces se ejecutará la función “displayOptions”, que mostrará todas las opciones del menú.
Si el ratón sale del menú, entonces lo que hará será ocultar todos los elementos del menú, excepto el primer elemento que lo volveremos activar.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Creando un interesante menú de navegación con CSS3
CSS 3 se está revelando como una poderosa herramienta a la hora de poder hacer diseños mucho más vistosos que los que se podían hacer hasta ahora. Entre las numerosas funcionalidades que nos proporcionará, esta la posibilidad de crear animaciones sin la necesidad de tener que añadir script adicionales.
El problema actual de utilizar este tipo de propiedades en los diseños, es que no todos los navegadores lo permiten actualmente. Solo Chrome, Safari y Opera permiten actualmente utilizarlo y Firefox, está previsto que lo haga en breve.
Vamos a ver la forma de crear un menú utilizando estas propiedades de CSS3.
Pueden ver un ejemplo del menú que crearemos en el siguiente enlace.
Como vemos el menú consistirá en una barra vertical de iconos, en los cuales según vayamos pasando con el ratón, aparecerá el nombre al que hace referencia ese icono. Si os fijáis, la forma de aparecer y desaparecer se hace de forma degradada.
Lo primero que hacemos es crear el código HTML, que no es más que una lista con las opciones.
Dentro de cada etiqueta “li”, tendremos un enlace con un “span” dentro, que será lo que mostremos cuando pase el ratón por encima del icono. A cada uno de los enlaces le asignamos un class diferente, para a la hora de mostrar el contenido, solo mostrar el que corresponda y no mostrar otro.
Ahora pasamos al tema de los estilos. Lo primero que hacemos es dar los estilos básicos al menú. El código correspondiente a esto es el siguiente.
Quote
*{ /* A universal CSS reset */ margin:0; padding:0; }
Con estos estilos lo que hacemos es indicarle la fuente que vamos a utilizar, tamaño, fondo...
La segunda parte del código correspondiente a la hoja de estilos es donde vamos a indicar que la aparición de los textos se haga de una forma escalonada y no de golpe.
Con las propiedades de transición lo que hacemos es que los elementos aparezcan de forma paulatina, en este caso le estamos diciendo que el tiempo que dure hasta que se complete la aparición sea de 250 milisegundo. Por ahora las transiciones solo están disponibles en navegadores que estén basados en WebKit., como son Safari y Chrome.
Por último, se indican las propiedades que formarán los enlaces que vayan apareciendo según pasamos el ratón por los iconos.
Menú lateral para mostrar enlaces a otras noticias de forma elegante
La idea es mostrar una lista fija al lado derecha de la pantalla con una miniatura. Cuando pasemos el ratón sobre estas miniaturas, la imagen se desplazará mostrando el título y dos enlaces, uno para ir al artículo y otro para ir a la demostración.
Lo primero que hacemos es crear toda la estructura HTML. Para ello utilizaremos listas. Veamos como quedaría esta estructura. Solo ponemos la de una miniatura. El resto serían iguales.
Como podemos ver, la lista tendrá una posición fija. A la propiedad derecha le damos valor negativo para que oculte las opciones de la lista y solo muestre la miniatura.
Lo siguiente que hacemos es darle los estilos a la etiqueta “span” que tiene el id “rp_shuffle”.
Con esto terminamos el tema de los estilos, y nos ponemos ahora con el código JavaScript que le dará funcionalidad a nuestro menú latera.
La idea del código es que los elementos del menú solo muestren las miniaturas, y que al pasar por ellos, se desplacen mostrando completamente el elemento, junto con los enlaces y el botón.
Las función de shuffle, nos mostrará de forma aleatoria los post.
El código jQuery correspondiente es el siguiente:
Quote
$(function() { /** * the list of posts */ var $list = $('#rp_list ul'); /** * number of related posts */ var elems_cnt = $list.children().length; /** * show the first set of posts. * 200 is the initial left margin for the list elements */ load(200); function load(initial){ $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list. //Make sure not to repeat while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else $elem.show(); ++loaded; } //animate them var d = 200; $list.find('li:visible div').each(function(){ $(this).stop().animate({ 'marginLeft':'-50px' },d += 100); }); } /** * hovering over the list elements makes them slide out */ $list.find('li:visible').live('mouseenter',function () { $(this).find('div').stop().animate({ 'marginLeft':'-220px' },200); }).live('mouseleave',function () { $(this).find('div').stop().animate({ 'marginLeft':'-50px' },200); }); /** * when clicking the shuffle button, * show 5 random posts */ $('#rp_shuffle').unbind('click') .bind('click',shuffle) .stop() .animate({'margin-left':'-18px'},700); function shuffle(){ $list.find('li:visible div').stop().animate({ 'marginLeft':'60px' },200,function(){ load(-60); }); } });
En esta ocasión, aprenderemos a crear un menú de pestañas con nuestra querida librería de javascript jQuery. Recrearemos de forma simple y limpia un menú de pestañas elegante, útil y listo para utilizar en nuestros sitios web.
Introducción: ¿Qué vamos a hacer? Cada día existen más diseños inspirados en el “formato blog”, estructuras que en su mayoría se componen de una cabecera, un menú horizontal, una división del contenido a dos columnas: contenido del artículo y columna derecha de widgets / gadgets y finalmente termina en un pie de página.
Es en esa columna derecha, en la de widgets, donde podemos ver un gran uso del menú de pestañas, la mayoría de las veces son pestañas que contienen información sobre el archivo de publicaciones, últimos comentarios, artículos más leídos, etc. Os dejo con una imagen previa de lo que haremos:
Así pues, mediante un poco de XHTML, CSS y javascript (jQuery en este caso) aprenderemos a crear nuestro propio menú de pestañas listo para usar en cualquiera de nuestros diseños web.
¡Vamos a ello!
Paso 1: La estructura HTML Como siempre, lo primero que debemos tener claro y preparado para trabajar, es la estructura html que tendrá nuestra página. En esta ocasión tendrán especial relevancia las listas y bloques de contenido:
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo crear un menú de pestañas elegante en jQuery</title> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" media="screen" /> <![endif]--> </head> <body> <div class="wrapper"> <h1>Cómo crear un menú de pestañas elegante en jQuery</h1> <br /> <div class="aux"> <div id="container"> <ul class="menu"> <li id="noticias" class="active">Noticias</li> <li id="tutoriales">Tutoriales</li> <li id="enlaces">Enlaces</li> </ul> <span class="clear"></span> <div class="content noticias"> <h3>Últimas Noticias</h3> <ul> <li><img src="img/bullet.png" alt="-" /> Manifiesto por los Derechos en Internet </li> <li><img src="img/bullet.png" alt="-" /> Logos que Inspiran Volumen #5</li> <li><img src="img/bullet.png" alt="-" /> Erasmusu llega a los 6.000 usuarios</li> <li><img src="img/bullet.png" alt="-" /> Lanzamos web.ontuts.com!</li> </ul> </div> <div class="content tutoriales"> <h3>Últimos Tutoriales</h3> <ul> <li><img src="img/bullet.png" alt="-" /> Cómo crear bordes redondeados en CSS3</li> <li><img src="img/bullet.png" alt="-" /> JSONP, llamadas entre dominios</li> <li><img src="img/bullet.png" alt="-" /> Introducción a Microsoft Silverlight</li> <li><img src="img/bullet.png" alt="-" /> Cómo aplicar sombra en textos con CSS3</li> <li><img src="img/bullet.png" alt="-" /> Creando capa de conexión abstracta a base de datos con PHP</li> <li><img src="img/bullet.png" alt="-" /> Mini Aplicaciones Web con Python y Juno</li> </ul> </div> <div class="content enlaces"> <h3>Deberías Visitar...</h3> <ul> <li><img src="img/bullet.png" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li> <li><img src="img/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Nuestra startup! <img src="http://web.ontuts.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </li> <li><img src="img/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Te gustan los juegos pixel art? <img src="http://web.ontuts.com/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley"> </li> <li><img src="img/bullet.png" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Anterior empresa</li> </ul> </div> </div> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="tabs.js"></script> </body> </html>
Estamos utilizando un contenedor con el id “container“, el cual fija el ancho de nuestro widget y que contiene por un lado el menú de selección de pestaña activa (en forma de lista desordenada) y tres divisiones contenedoras:
• noticias • tutoriales • enlaces
Estas tres divisiones (como habréis podido deducir) son las tres secciones que tendrá nuestro widget, las cuales contendrán su información correspondiente y que comparten la clase de CSS “content“.
Cada sección del menú horizontal tiene un ID que se corresponde con la clase de cada contenedor “content”. Esto nos facilitará el código javascript en próximos pasos.
Esta estructura html que parece tan simple, nos ayudará mucho en el paso 3, cuando tengamos que aplicar el javascript para recrear así la funcionalidad del menú.
Paso 2: Aplicando estilo a nuestro menú de pestañas Como hemos visto en la imagen previa, queremos que nuestro menú tenga las siguientes características de estilo: • Menú horizontal para las pestañas. • Ocultado de secciones no activas. • Resaltado de sección activa para diferenciarse de las demás. • Algunas zonas redondeadas para mejorar un poco el aspecto visual.
Como véis, estamos presuponiendo que todas las secciones de contenido estarán ocultas mediante la propiedad CSS “display:none“, salvo la sección de “noticias” la cual estará visible y activa asignándole la propiedad “display:block“. A su vez, en el menú “noticias” tendrá la clase “active” asignada, indicando que es la sección actualmente activa.
La clase de CSS “active” baja en 1 pixel la altura de la pestaña activa y oculta la línea superior de la división del contenido, proporcionando un poco más de diferenciación frente al resto de pestañas inactivas.
Sin la clase active y las propiedadas mencionadas, ocurriría lo siguiente:
Otra forma o camino a seguir para ocultar esta línea, sería aplicar un color idéntico al fondo de la división contenedora al borde inferior de la sección del menú, es decir que la clase “active” quedaría así:
El resto de código CSS simplemente se basa en retoques visuales para lograr un menú de pestañas un poco más bonito: imágenes para los encabezados, bordes redondeados, etc.
No queda mucho más que comentar, así que… ¡Vamos a por el código javascript!
Paso 3: Añadiendo funcionalidad con javascript y jQuery Antes de añadir la funcionalidad, es importante pensar con calma y dejar muy claro qué es lo que queremos conseguir y cuáles serán los efectos a emplear. En nuestro caso recrearemos lo siguiente:
• Las secciones del menú activan los contenidos • Al hacer click en una sección, se oculta el contenido actual y se muestra el nuevo. • Al hacer click en una sección, esta pasa a estar activa, la anterior deja de estarlo. • Utilizaremos para alternar entre contenidos un “efecto fade in“.
Para lograr todo esto, nos será de gran ayuda los métodos addClass y removeClass que nos proporciona jQuery, con los cuales podremos aplicar o quitar estilo de CSS de forma rápida y cómoda. Este sería el código de javascript:
Quote
$(document).ready(function(){ $(".menu > li").click(function(e){ var a = e.target.id; //desactivamos seccion y activamos elemento de menu $(".menu li.active").removeClass("active"); $(".menu #"+a).addClass("active"); //ocultamos divisiones, mostramos la seleccionada $(".content").css("display", "none"); $("."+a).fadeIn(); }); });
Es realmente poco código, ¿verdad? Esto tiene una explicación bastante clara, para los que no lo hayáis deducido ya, lo explicamos: • Cada sección en el menú tiene un ID asignado. • Cada contenedor “content” tiene además una clase asignada, que coincide con el ID de la sección del menú. • b>Mediante el ID, conocemos qué sección está seleccionando el usuario, y lo guardamos en una variable. • Con esa variable, accedemos a los distintos selectores para aplicar las clases correspondientes. • La clase “active” nos permite también saber qué sección dejará de estar activa.
De no organizarlo o plantearlo de esta forma en la que reaprovechamos una cadena para crear distintos selectores, estaríamos ahora mismo trabajando con un código javascript de muchísimas más líneas, ya que tendríamos que generar código para cada una de las secciones que tengamos, a más secciones más y más código necesitaríamos.
El método fadeIn() lo que hace es quitar el estilo por defecto “display:none” que tienen las secciones ocultas y lo muestra de forma progresiva.
Una vez más se demuestra lo importante que es el planteamiento inicial, tanto de estructura HTML, como de CSS y javascript para lograr el objetivo final con el mínimo de código y peso posible.
Reflexión final Es realmente interesante ver como jQuery ha facilitado la vida a los desarrolladores web con ejemplos como este, en los que reutilizando una cadena de texto sacada apartir de un ID podremos generar múltiples selectores listos para utilizar y trabajar con ellos, ahorrándonos código y aportando mayor rendimiento y velocidad a nuestras páginas / scripts.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Cómo crear un Menú Contextual en Javascript mediante jQuery
A medida que avanzamos en el tiempo, las aplicaciones web van cobrando mayor funcionalidad hasta el punto de llegar a ser réplicas exactas de algunas de las aplicaciones de escritorio más conocidas (Google Docs, Zoho…). Todo esto se consigue mediante el uso de técnicas de CSS y Javascript “innovadoras”, recreando controles tan típicos pero ausentes hasta ahora como es el caso del menú contextual, el cual recrearemos en este tutorial.
Introducción: ¿Qué vamos a hacer? Vivimos en una época en cual las aplicaciones web ganan en usabilidad e interactividad a una velocidad pasmosa. Si hace unos años el Javascript se utilizaba principalmente para crear formularios un poco más interactivos y algunas pequeñas alertas, ahora el Javascript y el CSS nos permiten mucho más, y se están utilizando para recrear auténticas interfaces ricas, funcionales y usables para la mayoría de los navegadores. En este tutorial aprenderemos a crear paso a paso y desde cero el famoso menú contextual de los distintos sistemas operativos, el cual se activa cuando el usuario hace click con el botón secundario de su ratón.
Nuestro menú contextual soportará: • Elementos de tipo enlace • Elementos que desencadenan acciones • Elementos desactivados (aparecen, pero no se podrán seleccionar) • Aparecerá cuando el usuario pinche el botón secundario de su ratón. • Desaparecerá cuando el usuario pinche fuera del mismo, en alguna de las opciones activas o cuando se presione la tecla Escape.
Para ello utilizaremos lo mismo que venimos usando en la mayoría de los tutoriales que os he presentado: la librería de javascript jQuery, CSS y HTML.
Paso 1: La estructura El documento HTML que utilizaremos será bastante sencillo, utilizaremos la misma base que en otras ocasiones y un pequeño menú en forma de lista desordenada. Os dejo con el código para que le echéis un vistazo:
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Creando un menu contextual mediante jQuery | Web.Ontuts</title> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> </head> <body> <div class="wrapper"> <div class="section"> <h1>Utiliza el boton derecho del ratón para activar el menú contextual</h1> </div> </div>
El menú contextual, representado con una lista desordenada tiene los siguientes elementos: • Anterior: Regresa a la página anterior • Siguiente: Deshabilitado • Recargar: Recarga la página actual • Visitar web.XXX: Enlace que lleva a web.XXX.com • Agrevar a favoritos…: Abre el diálogo de agregado a favoritos
Cada elemento de la lista desordenada de id=”menu” representa cada una de las opciones del menú. Todas contienen un id que nos servirá posteriormente para detectar su selección. La clase “disabled” del elemento “Siguiente” indica que está deshabilitado. Los elementos del menú tienen un id asociado para reconocer su selección. La clase “disabled” indica que la opción está deshabilitada.
Una vez tenemos claro qué hará cada opción de nuestro menú, sólo nos queda gestionar todo este comportamiento mediante Javascript, pero antes y como de costumbre, vamos a echar un vistazo rápido al código CSS que hemos utilizado.
Paso 2: Añadiendo estilo con CSS a nuestro menú contextual En este caso, el código CSS es muy básico y sólo hay un par de puntos a resaltar, echemos un vistazo al código antes de resaltar dichos puntos:
Para los más despistados me gustaría recordaros que estamos utilizando una serie de propiedades que no se consideran estándar, se trata de una serie de propiedades enfocadas a recrear el redondeado de los bordes de nuestro menú contextual, hablamos de las propiedades:
• -moz-border-radius: Para navegadoresmozilla • -webkit-border-radius: Para navegadores webkit • -khtml-border-radius: Para el navegador Konqueror
La propiedad CSS estándar border-radius permite definir el radio de los bordes redondeados de nuestros elementos. Debido a que algunos navegadores todavía no soportan de forma oficial el redondeado, se utilizan propiedades no estándar como: -moz-border-radius, -webkit-border-radius o -khtml-border-radius.
Si os habéis fijado, también estamos definiendo una imagen de fondo para todos los elementos del menú, salvo para la opción deshabilitada “Siguiente”. Es algo estético, pero dotará de mayor vistosidad a nuestro menú contextual.
Ahora sí, vamos a por la funcionalidad de nuestro menú, ¡vamos a la parte de javascript con jQuery!
Paso 3: Dándole vida y funcionalidad a nuestro menú contextual mediante Javascript Hemos dejado pasar por alto un pequeño detalle en la sección del CSS que me gustaría comentaros ahora. El menú contextual tiene por defecto aplicada la propiedad de CSS “display: none“, con ello conseguimos que el menú esté oculto hasta que el usuario lo llame mediante el botón secundario de su ratón.
El menú contextual está por defecto oculto mediante CSS (display: none), alterando esta propiedad mediante javascript haremos que se muestre donde el usuario haga click.
Vamos a definir y recordar de forma breve qué es lo que hará nuestro menú contextual: • Aparecerá cuando el usuario haga click con el botón secundario de su ratón. • Desaparecerá cuando el usuario seleccione una opción, pinche fuera del menú contextual o presione la tecla Escape.
Vamos a abordar las distintas partes del código de nuestro menu.js, pero recordad que todo este código irá como siempre dentro del evento $(document).ready. Es decir:
Quote
//Cuando el documento esté listo... $(document).ready(function(){ //todo el código aquí )};
Aclarado esto, vamos a ello.
Desactivando el menú contextual por defecto Como bien sabréis, al pinchar en el botón secundario de vuestro ratón en una web se muestra por defecto un menú contextual correspondiente al navegador. Mediante la función bind de jQuery vamos a cancelar este menú contextual, en pro de mostrar nuestro propio menú contextual personalizado.
Mediante la función bind de jQuery cancelaremos el menú contextual por defecto. Esto funciona en la mayoría de navegadores pero el navegador Opera no lo admite, por lo que se seguirá mostrando el menú contextual por defecto.
Con este sencillo código cancelaremos el menú contextual por defecto y además mostraremos nuestro menú contextual:
Quote
//EVITAMOS que se muestre el MENU CONTEXTUAL del sistema operativo al hacer CLICK con el BOTON DERECHO del RATON $(document).bind("contextmenu", function(e){ menu.css({'display':'block', 'left':e.pageX, 'top':e.pageY}); return false; });
Como podréis leer en los comentarios del código de arriba, estamos alterando varias propiedades del CSS para mostrar correctamente nuestro menú. Modificando la propiedad display: block del CSS estamos mostrando la división que contiene a nuestro menú contextual.
Además estamos situando el menú de forma que la esquina superior izquierda, coincide con donde el usuario hace click.
El objeto “e” devuelto por la función bind permite reconocer la posición exacta del click del usuario. Las propiedades e.pageX y e.pageY nos dicen la distancia horizontal y vertical (respectivamente) que hay en pixels desde la esquina superior izquierda (punto 0,0). Ahora que ya sabemos mostrar nuestro menú contextual, vamos a ver cómo gestionar las acciones de los elementos del menú.
Controlando las acciones de los elementos del menú contextual Vamos a utilizar una sentencia del tipo switch, de esta forma controlaremos para cada caso / opción del menú contextual las acciones que deseemos, y además será muy fácil añadir nuevas acciones a futuros elementos nuevos:
Quote
//variables de control var menuId = "menu"; var menu = $("#"+menuId);
//Control sobre las opciones del menu contextual menu.click(function(e){ //si la opcion esta desactivado, no pasa nada if(e.target.className == "disabled"){ return false; } //si esta activada, gestionamos cada una y sus acciones else{ switch(e.target.id){ case "menu_anterior": history.back(-1); break; case "menu_siguiente": alert("ha seleccionado siguiente"); break; case "menu_recargar": document.location.reload(); break; case "menu_favoritos": var title = "Tutoriales de Desarrollo y Diseño Web | Web.Ontuts"; var url = "http://web.ontuts.com"; //para firefox if(window.sidebar) window.sidebar.addPanel(title, url, ""); //para Internet Explorer else if(window.external) window.external.AddFavorite(url, title); break; } menu.css("display", "none"); } });
Como véis, estamos guardando en dos variables dos referencias al menú, simplemente y como hacemos siempre para optimizar un poco el código y evitar que jQuery busque el elemento cada vez que se ejecuta el código javascript.
Mediante la función click de nuestro menú contextual sabremos en todo momento cuándo se está haciendo click en alguna de las opciones del menú, para poder decidir en cada caso qué hacer. ¿Cómo sabemos cuál ha sido seleccionada? Muy fácil: el objeto “e” de la función click nos permitirá explorar el elemento en el cual se ha hecho click y además, conocer su id.
Nuevamente el objeto “e” (de la función click) nos permitirá reconocer el elemento del menú que se ha seleccionado. Según el valor del id del elemento, ejecutaremos unas acciones u otras.
En caso de que el elemento seleccionado tenga asignada la clase CSS “disabled” sabremos que esta opción está desactivada y no ocurrirá absolutamente nada (ni si quiera se cerrará el menú contextual).
Las acciones de los elementos son triviales, así que os dejo que investiguéis un poco vosotros mismos, pero los nombres son muy sugerentes.
Ocultando el menú contextual La lógica nos dice que el menú contextual y su comprobación de ocultado sólo tendríamos que aplicarla cuando el menú estuviese visible, pero en nuestro caso, no necesitamos gestionar el estado del menú, ya que variando las propiedades de CSS será suficiente.
Los dos casos en los que debería desaparecer el menú contextual serían: • Usuario hace click en alguna zona de la página que no sea el menú • Si el usuario pulsa la tecla Escape • Habría un tercer caso, que hemos puesto antes, que sería cuando se ha seleccionado una opción del menú activada (en las deshabilitadas no se oculta).
He aquí los dos casos que acabamos de comentar:
Quote
//controlamos ocultado de menu cuando esta activo //click boton principal raton $(document).click(function(e){ if(e.button == 0 && e.target.parentNode.parentNode.id != menuId){ menu.css("display", "none"); } }); //pulsacion tecla escape $(document).keydown(function(e){ if(e.keyCode == 27){ menu.css("display", "none"); } });
Nuevamente el objeto “e” en las dos funciones utilizadas nos permiten acceder[b] a las propiedades [b]button y keyCode para saber qué botón y tecla se ha pulsado, en nuestro caso el botón principal y la tecla Escape. También es interesante ver cómo vamos accediendo desde el elemento sobre el que se ha hecho click, hasta el elemento padre “menu” mediante “e.target.parentNode.parentNode.id, de esta forma podremos comprobar si se el usuario ha pinchado encima / dentro de alguna parte del menú contextual.”
La propiedad button con valor 0 nos indica que se está pulsando el botón principal del ratón. La propiedad keyCode con valor 27 indica que se ha pulsado la tecla Escape. Ambas propiedades provienen del objeto “e” de sus respectivas funciones.
Y esto es todo lo que hemos de tener en nuestro código javascript… una vez más es menos de lo que en un principio pudiese parecer.
Reflexión final Ahora que sabemos cómo crear las bases para nuestro menú contextual sólo queda pensar en formas de mejorarlo, por ejemplo, si un usuario pincha en la parte de la derecha de la pantalla, se activaría el scroll horizontal, seguramente fuese conveniente detectarlo y mostrar un poco más a la izquierda el menú, etc…
Hemos retomado por mi parte los tutoriales con javascript y jQuery, la verdad es que me encanta escribir sobre estos tutoriales, son detalles y pequeñas mejoras que dan mucha calidad a las aplicaciones. Seguramente siga profundizando en distintos tipos de controles para tratar de recrear interfaces ricas y útiles para vuestros proyectos.
Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
