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