Respondiendo a la multitud de peticiones en los comentarios del artículo sobre cómo crear un menú en acordeón, aquí os muestro cómo hacer el mismo menú pero con soporte para varios niveles.
Este menú está basado en el anterior, y como apenas necesitaba un pequeño cambio en el javascript para hacerlo multinivel, he aprovechado para convertirlo en un plugin y enseñaros en un screencast cómo hacer vuestros propios plugins en jQuery.
Ver Demo menú acordeón multinivel
Ver screencast (duración: 8:17)
- Descargar videotutorial en alta calidad – MOV (25 MB)
- Descargar videotutorial optimizado para iPod/iPhone – M4V (13 MB)
No olvidéis echarle un vistazo al resto de videos en la página de videotutoriales, o suscribiros al podcast de iTunes.
Cómo usarlo
Para ver el HTML y CSS no tenéis mas que ver el código fuente del ejemplo de arriba, es bastante similar al del artículo anterior. En el html se añade un nivel más de anidamiento de listas, y en el CSS se le añade la regla #menu ul li li{padding-left: 10px;} para que los niveles inferiores tengan padding (esto podéis modificarlo como queráis).
Para cargar el javascript, podéis copiar el código en la cabecera tal como está en el ejemplo, o bien descargaros el archivo JS con el plugin e insertarlo de esta manera:
<script src="jquery.accordion.js" type="text/javascript" charset="utf-8"></script> |
Después sólo os queda llamar al plugin:
<script type="text/javascript" charset="utf-8"> $(function(){ $('#menu').accordion(); }); </script> |
Hola!
Primero que nada te agradesco que hayas publicado el menu me ha servido de mucho pero tengo una duda, por que si quito este script ya no abre el menu
@MHR No entiendo tu duda. El código javascript es lo que hace que el menú funcione.
Fijate que no me había detenido a ver este video tuttorial y no entiendo cómo es que me lo había perdido, esta muy bueno y más porque me ayudó a entender algunas cosa de jquery.
La mayor parte me la paso copiando los plugins y funciones de jquery si detenerme a ver como es que funcionan, buebo, parte de ello es por mi ignorancia, pero con este video contribuiste a que aprendiera algo más, te lo agradezco infinitamente.
buenas,me parece un ejemplo buenisimo,pero me gustaria que me ayudarais porque ma hace falta realizar algun cambio para mi caso en particular y como de jquery piloto poco pues me cuesta bastante.Paso a contar mi caso:
Pues me gustaria conseguir es ejemplo pero que vaya guardando en un array los elementos que tengo abiertos,de tal modo que cuando refresco la pagina de nuevo puedan estar abiertos los que tenia,pq tal y como esta ahora al refrescar se perderian todos los que estaban abiertos.
la aplicacion la tengo con tiles y no puedo cambiarla para que al pulsar un enlace solo me refresque una parte y no toda la pagina porque seria muy costoso tal y como lo tengo yo,asi que si me podeis ayudar os lo agradeceria enormemente.
muchas gracias y espero haberme explicado bien.
@daniel Me temo que lo que preguntas ya se sale del ámbito de este tutorial, puesto que cuando recargas no puedes almacenar el estado de las variables en javascript de forma trivial. Puedes hacer algo en php o bien guardar un array con los menús abiertos en cookies y después cuando recargas hacerlos visibles tomando estos valores. Como he dicho, tendría que extenderme mucho para poner un ejemplo de implementación de esto.
Te agardezco tus aportaciones y tu tiempo; para mi que empiezo mis pasos en el diseño web, a nivel personal es una gran ayuda .
Te queria comentar si hay alguna manera de que cuando se pulsen los enlaces del menu acordeon
se visualice el contenido en el cuerpo de la misma pagina web , como las pestañas que pulsas y se visualiza el contenido debajo, no se si me he explicado bien algo así
http://www.sohtanaka.com/web-design/examples/tabs/
Un saludo
@antonio Utilizando ajax. Busca en el API de jQuery en su web la función
load()e investiga por ahí, no es difícil. Esta pregunta me la han hecho ya en los comentarios varias veces, a ver cuando saco un poco de tiempo y preparo un tutorial sencillo para explicarlo.Fijate que no me había detenido a ver este video tuttorial y no entiendo cómo es que me lo había perdido, esta muy bueno y más porque me ayudó a entender algunas cosa de jquery.
La mayor parte me la paso copiando los plugins y funciones de jquery si detenerme a ver como es que funcionan, buebo, parte de ello es por mi ignorancia, pero con este video contribuiste a que aprendiera algo más, te lo agradezco infinitamente.
Hola David…
Primero gracias por tu aporte, tengo mucho interes en esto de los acordiones,lo probe y me funciona perfectamente pero tengo un duda, en el codigo html haces un referencia a esta direccion «http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js» type=»text/javascript» charset=»utf-8″ lo borre y obiamente no funciona me podrias explicar esto….
@Diego Con esa línea cargas la librería javascript jQuery, la más utilizada hoy en día. Sirve para simplificar el manejo de eventos, manipulación de elementos, ajax, etc, además de tratar con algunas diferencias entre navegadores que existen con javascript. http://jquery.com/
Hola David!! pues felicitarte por tu blog, me ha sido de gran ayuda, ya que yo ni idea de javascript y me va fenomenal lo de los videotutoriales!!
pues sólo quería preguntarte, como muchos otros lo han hecho, que de que manera mantengo el menú desplegado una vez el usuario esté navegando por la web. He visto que cuando tengas tiempo realizarás un tutorial para ello y a la espera estoy, porque me he metido en unos cuantos foros para solucionarlo, pero nadie ha sabido solucinármelo. Dejo link de la web dçonde lo he aplicado:
http://www.g108colectivo.es/atelier
un saludo y a pasar calorete, graciasssssssss ^__^
Es esta la solución??
http://api.jquery.com/load/
un saludo otra vez
Ya está solucionado, para los que les suceda lo mismo que a mí, la solución es cargar el contenido de los enlaces en un div en vez de recargar la web.
dejo aquí dos links, dónde descargar ejemplos y la explicación:
http://guedea.blogspot.com/2008/09/cargar-pginas-con-php-y-ajax.html
http://blog.nnatali.com/2009/07/27/ajax-aprendiendo-a-cargar-contenido-en-un-div/
Un saludo, espero que sirva
Muchas grcias por tu codigo, Sin embargo he tratado de meter una funcionalidad de que abra un determinado nivel, sin embargo me he encontrado con 2 problemas: 1. Si pones «id=open» en la lista no abre las listas anteriores asi que agrege mas open’s, por ejemplo id=»open1″, id=»open2″, id=»openX» y si abre hasta el nivel que agregues sin embargo cuando abres un menu, hace el efecto el numero de identificadores open’s que agregues. Si puedes darme una ayudada te lo agradeceria infinitamente.
@Andres Ya alguien preguntó esto, y comenté aquí, por si te sirve de ayuda: http://www.davidrojas.net/index.php/diseno-web/menu-vertical-en-acordeon-con-css-y-jquery/comment-page-3/#comment-878
David… una pregunta… tiene alguna limitación con los navegadores? en IE6 no me funciona… podrá ser algo de eso o podra ser por algun filtrado de la red corporativa de la empresa???
@Jose Hay ciertos efectos visuales (los bordes redondeados, sombras) que no funcionan en IE6 (en realidad en ningún IE), pero el resto en este caso debe funcionar, ya que en el css no hay ningún selector avanzado, y no debe haber problema con el javascript. Lo que se me ocurre es que quizá no te está cargando jQuery debido a algún filtrado de la red, ya que lo carga desde el cdn de google. Puedes probar copiando jQuery de forma local y enlazándolo.
Muchas gracias David, al final consegui solucionarlo por mi cuenta pero ultimamente estoy tocando cosillas de javascript y no encuentro muchos blogs de este estilo.
Muy bueno!!!
saludos y gracias por el video-tutorial
Me ha sido de gran ayuda, gracias por publicarlo.
Sólo un pequeñísimo bug, si tienes desplegado el submenu2, y pulsas el submenu3, deberia plegarse el submenu2 y no lo hace…. sólo plega cuando el que seleccionas tiene «subs».
Estoy con ello, si lo solvento, os lo comunico. Un saludo y gracias por compartirlo!
Hola David, me ha parecido fantástico tu código y estoy implementándolo en un sitio en WordPress.
El problema que tengo es mantener desplegado el menú de forma que se muestre el «item» de la página activa. WP lo incluye así:
«xxx«.
¿sabes si alguna implementación de tu menú en algún sitio wordpress tiene esto resuelto? ¿se te ocurre como hacerlo?
Gracias anticipadas
@jlopezto Cuando utilizas el sistema de templates de wordpress, el motor te incluye la clase current_page_item en el elemento de la página activa (siempre que generes el menú dinámicamente), sólo tienes que estilar esta clase para que esté visible.
Hola David, me encanta este tutorial pero necesito algo más ¿hay alguna forma de que coja los valores de los nombres del menú de un xml?
Llevo días como loco intentándolo y no doy con la solución.
Un saludo y mil gracias.
Muchas gracias por tu gran aporte. Mi pregunta es: Si yo implanto el mismo menú en bastantes páginas de mi sitio web, a la hora de actualizar los contenidos o items del mismo, tendría que editar todas ellas ¿no? Existe alguna manera de que el contenido del menú lo tome de un fichero externo? De esa forma, actualizando ese fichero, el contenido se actualizaría en todas las páginas. Muchas gracias de nuevo.
@Valdehornos Haciendo un include() con php es la forma habitual de manejar esto.
Hola David muy bueno el ejemplo me gustaria que me indicaras como poner un icono al lado de las opciones del menu y si alguna opcion está activada
como cambiar el icono. Muchas gracias!!
David, ¿Podrías poner un ejemplo de lo que pide Valdehornos? Yo tambien estoy muy interesado en saber como hacerlo y no te entiendo lo que dices.
Gracias y un saludo.
hola este una pregunta por ke cuando pongo el menu y la pagina es mas chica y bajo el scroll y le doy clic a uno de los menus me regresa hasta arriva y no se expande como otras paginas a lo ke me refiero es a un menu de acor dion como este : http://sistemadif.jalisco.gob.mx/ si tu notas el menu cando tomas la primera selecion el scroll se ase mas grande o se hase a asi abajo
Hola david, gracias por tus aportes a toda la comunidad de programadores web. tengo una pregunta. cuando despliego el acordeon, todos los elementos de la pagina se desplazan hacia abajo.
Como podria solucionar este problema? para que los elementos de la pagina se queden fijos?
Gracias
@daniel Tienes alguna web colgada con el problema para verlo?
Saludos David,
Estoy usando el plugin de menus, pero tengo dos problemas:
– Al cargar la página, me aparecen todos los submenus desplegados, he usado el parámetro starting open para tratar de evitar esto, pero no se soluciona.
– Luego de dar click en una de las opciones del menú, y cargarse la página respectiva, el plugin deja de funcionar (aunque si lo estoy llamando)
Gracias de antemano por tu respuesta
@Marco Sólo con la captura de pantalla no sé decirte, tendría que ver la página. De todas formas, ¿te da algún error en el firebug?
David, en mi nombre está el link de la pantalla, el firebug al ingresar a la página me da el error «unrecognized expression: #» y es sólo cuando activo tu pluggin. Luego al dar click en uno de los links me sale «$(«#myMainMenu»).accordion is not a function» Lo que me parece raro, porque es como que no llamara al plugin, pero lo hago con <script ..etc etc
Bueno David, he paleado uno de los errores copiando directamente el código del plugin en mi clase que maneja la plantilla, ya no tengo más mensajes en el firebug, pero aun se despliegan todos los submenus al cargar la página, ¿qué puedo hacer David? es lo único que me resta por resolver
David, agradezco tu torial, problema resuelto, no había usado tu css, por eso no me había dado cuenta del problemilla con el display none, pero ya está.
Muy bueno el tutorial
Hola david, gracias por tus aportes, el menu funciona perfecto, pero quisiera que al desplegar el menu, el contenido de la pagina no se desplegara hacia abajo, puedes checar esto en el siguiente link: http://danielantioquia.info/sitios/multigym/aliados/aliados_principal_html.php
Gracias por tu ayuda
@daniel Me temo que no es problema del menú, sino de la estructura de la página. Por ejemplo si haces float:left; margin-bottom; 500px; al menú se arreglaría, pero es importante que estudies cómo has colocado los bloques y diseñes una buena estructura.
Excelente tutorial David, ha sido de mucha ayuda, pero tengo una duda y no he logrado resolverla.
Los submenu siempre parten abiertos, como puedo hacer que partan cerrados, son nuevo con jquery y no logro el resultado.
agradecería tu ayuda.
Saludos
@Javier En el video lo explica, por defecto debe salir todo cerrado si no pones ninguna opción. ¿Has mirado con firebug si te da algún error?
Hola David, muy interesante tu tutorial, pero tengo el mismo problema que muchos compañeros que han dejado un comentario. Estoy usando tu script en varias paginas y si tengo el mismo menú en todas ellas y necesito actualizar los items, tendría que editarlas todas. ¿Existe alguna manera de que el contenido del menú lo tome de un fichero xml? Así modificando ese archivo, el menu se actualizaría en todas las páginas porque por más vueltas que le doy, no consigo dar con ello y he estado googleando por ahí y nada de nada. A ver si nos podrías iluminar. Muchas gracias por todo.
hola;estoy utilizando el menu que has realizado en el video tutorial,solo quiero agradecerte este buen trabajo,ya utilice el ejemplo anterior en la pagina y ahora voy por este me gusta y he conseguido que funcione jjjjj
y una preguntita he estado mirando por tus «archivos» busco una manera de utilizar un div como un iframe tendrias algo?
muchas gracias por adelantado y por todo …
tdo bien lo del menu ,ya casi termino mi pag pero hay algo q esta mal,cuando hago click en :
informacion institucional/historia ..ok se habre la pagina pero el menu se cierra ..hay alguna manera de mantener abierto el menu donde le di click ??
mi menu es Informacion institucional(Padre)
Vision(hijo)
Mision(Hijo)
Organigrama(hijo)
…..
por favor ayudenme………..
att
Marlenny
Excelente tutorial David, me ha sido de mucha ayuda, pero tengo una duda y no he logrado resolverla.
se esta utilizando event.preventDefault() para q no siga el enlace pero en mi sitacion me gustaria que siguiera el enlace del padre pero que a su vez despliegue los hijos y estos permanescan abiertos. ya que si le quito el event.preventDefault() me sigue el enlace del padre pero los hijos no, en cuanto se empiezan a desplegar me carga la ruta del padre la cual se muestra dentro de otro div y los hijos se ocultan.
espero me puedan ayudar con esto.
saludos
Hola David, primero agradecerte el tiempo que empleas en nosotros es de agradecer, todo lo que has publicado me ha servido para introducirme en la inmensidad de jquery, pero se me hace un tanto complicado, te comento, más o menos he visto que alguien ha comentado algo parecido pero no lo he entendido;
…
if(settings.startingOpen){
$(settings.startingOpen).show();
}
…
$(‘#menu_cc’).accordion({keepOpen:false, startingOpen: ‘#open’});
he intentado varias combinaciones pero mis conocimientos no dan más de si por no decir que llevo dos semanas con este menú y funciona todo, todo, excepto que en este caso funciona
menu
-submenu→ id #open
-subsubmenu
pero en este no despliega el subsubnivel y no consigo que funcione
menu
-submenu
-subsubmenu → id #open
échame una luz del camino llego a desesperar, muchas gracias
Muchas gracias por la información.
Estoy trabajando con liferay y queria utilizar el código para crear un portlet, pero al crear el proyecto no se donde tengo que añadir el html, ya que por defecto crea varios archivos de este tipo.
Agradecería tu ayuda.
Un saludo
Esto es solamente posible con JQuery? o es posible trasladar este código y ponerlo a funcionar con DreamWeaver?
gracias
Como hacer para que funcione el y te envie a algun link, hablo de la parte donde das clic para que se despliegue el menu,
Menu 1 (solo despliega el menu, como hacer que funcione para que tambien te lleve a otro lado y tambien desplegue el menu )
hola david , muchas gracias por tu aporte, tengo un problema, he seguido todos los pasos de tu tutorial pero al ver la pagina con f12 me dice jquery no definido, no he encontrado nada en la red que me ayude tal veztu tengas auna respusta… un saludo grande
Muchas gracias por el aporte.
Saludos …….
Hola David,
He usado tu script, que me parece fantástico, simple y elegante. Gracias.
Lo que pasa, y te lo pongo aquí por si le surge a alguien, al combinarlo con el jQueryUI deja de funcionar correctamente, debido a que jQueryUI debe tener también su plugin accordion.
Con renombrar la función a, por ejemplo, «davidrojas_accordion», funciona sin problemas.
Salu2