Menú acordeón con Indexhibit en 4 pasos
18 de Marzo, 2008 escrito por SkekuAgradecimientos totales a Thenine que ha sido quien se lo ha currado mejorando notablemente mi método.
Paso 1: Descargar la última versión de jQuery actual. (Descargar jQuery [en]).
Paso 2: Sustituir la versión que viene con Indexhibit por la que acabas de descargar. El js está localizado en [carpeta-Indexhibit] > [ndxz-studio] > [site] > [js].
Paso 3: Descargar este archivo javascript: Collapsable.menu.js (clic derecho > guardar como).
Paso 4: Subirlo a nuestro espacio web y hacer la llamada desde nuestro index.php del mismo modo que se hacen las otras llamadas a archivos js. Creo que no hace falta ni que lo diga ;)
Y listo. Más rápido y sencillo imposible. Comentar que sólo funcionará si no se ha modificado la estructura del menú de Indexhibit. Tal y como yo hacía en la forma que expliqué la otra vez, sí que había que hacerlo.
Le pongo como pega que al probarlo en el portfolio me he dado cuenta que no es compatible con sIFR. No funciona en Explorer ni Opera :S Aún así, solución eficaz y muy sencilla de implementar.
Suscríbete a los comentarios o anímate y deja tú el tuyo | Si lo prefieres también puedes suscribirte gratis al feed de la web o compartir el post:
Entradas (RSS)
Comentarios (RSS)
Hola skeku, lo primero gracias por mencionarme.
Lo segundo: El script funciona perfectamente (al menos con Jquery 1.2.1) desde IE 5.5 en adelante, igual que en Opera. Es posible que tengas algun conflicto con los cambios que has hecho pero si haces la llamada desde el tema “sample” (por ejemplo) sin modificar nada más verás que funciona.
Bueno es una solución aunque no la mejor….. Ys i tiene ciertas incompatibilidades con algunos exploradores.
The nine, el script funciona correctamente tal y como dices. Yo a lo que me refiero es que con el reemplazo sIFR no funciona en Explorer + Opera.
Que quizá es cosa de mi código pero me extraña muchisimo el que firefox y safari lo pillen y los otros dos no.
Bueno yo no lo probé para sIFR la verdad, asi que no vi si funcionaba o no, aunque extrañarse que algo pete con i.e. hoy en día es casi como extrañarte que el chikichiki sea un éxito nacional.
¿Que no es la mejor solución? ¿Que hay otras alternativas? Seguro que si, nunca lo propuse como la mejor, ni la única siquiera. Solo dije en un comentario que era “la que yo utilicé”. Se trataba de hacer algo sencillo que pudiera aplicar cualquier persona como yo mismo, que no tengo ni pajolera idea de javascript ni me apetece aprender. Añades una linea a tu código y voilá.
Por cierto ya que estamos mi nick es thenine, todo junto. Saludos de nuevo a todos y gracias por las críticas, aunque me temo que no voy a seguir desarrollandolo
y para safari, firefox funciona?? Yo lo quiero hacer, pero es que no tengo ni pajotera idea en donde tengo que meter ese código. En fin, creo que me daré por vencida.
ah, y que pasa con los exploradores que no funciona?? no se ve?? se ve mal, no se puede clickar….
Pues mira, me interesaba seguir este método pero yo sí que no tengo ni idea de cómo se hace la llamada al js desde index… ¿alguien podría explicarlo, por favor?
hola, me encuentro con el mismo problema que santi, veo miles de archivios index.php, cual es el que tengo que tocar y como? soy nula en esto. Gracias
@ana y @santi, todo dependerá del tema que tengáis activado. En cualquier caso el index.php está situado en la misma ruta que comento arriba, sólo que en un nivel superior:
[carpeta-Indexhibit] > [ndxz-studio] > [site] > aquí tiene que estar el php.
No obstante hace un tiempo puse un link a unos tutoriales que igual también os ayudan:
http://stereoplastika.com/teorika/?tag=indexhibit
Hola!!
Muchas gracias por la info! Realmente muy útil! He conseguido instalar el menú en acordeón en la página que estoy montando y funciona muy bien (por lo menos con Firefox y Safari desde mac).
Me ha surgido, pero, un problemilla:
He detectado que después de configurar el menú en acordeón, las exposiciones de la web que están configuradas con pase de imágenes “Thickbox” no funcionan!!!
Al clicar la imagen, se hace el fundido en el fondo, pero no se carga la imagen.
Viendo esto, he sustituido los archivos que he modificado para el menú acordeón por los originales y el modo Thickbox vuelve a funcionar bien.
¿Le pasa a alguien más?
¿Existe alguna solución?
¿Tengo que prescindir de este tipo de menú si quiero utilizar el modo Thickbox?
…
Muchas graciasss
Hola,
estoy intentando hacer el menú desplegable, pero me he quedado en el mismo paso que ana y santi. y yo en el nivel que dices (skeku): [carpeta-Indexhibit] > [ndxz-studio] > [site] > aquí tiene que estar el php.
Ahí no tengo ningún php, solo tengo las carpetas de css, eatock, img, js, plugin y sample, pero ningún index.php. en cambio en un nivel superior si que tengo.
Me estoy liando bastante con todo esto, por favor si alguien explicase todos los pasos (para tontos) me haría un favor a mi y a todos los que están como yo.
Muchas gracias de antemano.
Por cierto, si os molestan estas preguntas por que os da palo volver a explicar todo esto que seguro que lo veis super básico (que lo entiendo), y conoceis algún sitio dónde lo expliquen bien, también me vale.
ya me he leído unas cuantas veces el tutorial de stereoplastika (que lo valoro mucho y me ha ayudado un huevo), pero para poder hacer cosillas un poco más avanzadas, se queda a medio camino.
Pues eso que si sabéis de algun foro o blog o simil que hablen de esto y lo expliquen bien también me sirve. Mil gracias!
Victor, estas preguntas nunca son mal recibidas. Evidentemente no todas podrán ser respondidas, por lo menos por mi parte, porque no me sé Indexhibit al dedillo
Lo miro cuando llegue a casa pero es posible que me haya equivocado. Por defecto, indexhibit trae (o traía cuando yo lo instalé) dos temas diferentes: el eatcock y el sample. Dentro de cada uno de ellos debería haber una estructura de css, js, etc.. pero bueno que lo miro y te digo algo.
La llamada al js es una carga de javascript normal y corriente. ejemplo:
script type=’text/javascript’ src=’http://www.criteriondg.info/portfolio/ndxz-studio/site/js/jquery.js’
Tendrías que poner delante y detrás las etiquetas de apertura y cierre de script script y /script. Pues Eso mismo lo metes donde se carguen otros js que suelen estar entre las etiquetas head del html.
Muchas gracias Skeku!
Se agradece mucho que la gente colabore así.
Ahora mismo lo pruebo y te digo algo.
GRACIAS!
hola Skeku, yo he montado sin problemas el menu desplegable, lo que quiero ahora es ver si puedo modificar el tamaño de los “titulos” de cada seccion, pero lo he hecho combinandolo como lo hacias tu en la “antigua manera” y no se ha podido… se anula el “acordeon” y solo me muestra (si en otro tamaño) las secciones, y la prmera “sub-seccion”, no se si me estoy explicando….alguna idea de como cambiar el tamaño de las “secciones” e conjunto con el script?
Hola, gracias por la explicación, ha sido muy sencillo.
Mi problema es que, al pasar el cursor por encima del nombre de los proyectos, no cambia el icono a la tipica manita con el indice levantado, de maner que la gente no sabe que se puede clckar sobre los nombre para desplegar los proyectos. Si clickas, se desplegan bien, pero pierde “intuicion”. A alguien le pasa tambien? Se puede solucionar? Gracias!!
@luis, tienes que añadir una propiedad CSS extra a la id de section.tittle. La de cursor: pointer para añadir lo que dices
vale, yo soy un neofito en esto del css, me podrias explicar exactamente qué archivo editar y que código meterle, y donde? Por favor.
Gracias!!
por cierto, hay alguna linea de codigo o plugin o algo que se le pueda meter para que al clcickar sobre un proyecto para desplegarlo, se pliegue cualquier otro que tuvieras abierto? Gracias de nuevo!
@Luis:
Tienes que modificar la hoja de estilos CSS llamada style.css. La tendrás ubicada más o menos en una ruta parecido a esto:
tudominio/ndxz-studio/site/sample/style.css
Ahí tienes que buscar:
#menu ul li.section-title
le tienes que añadir la propiedad:
cursor:pointer;
Con eso ya te haría lo del cursor. Sobre lo otro que comentas, es un efecto acordeón, no creo que sea mucho problema añadirlo. Te lo miraré este finde si puedo que ahora ando algo espeso
Genial! Muchas gracias!! Esperaré.
Luis Arpa
Luis, te he estado mirando un poco el tema pero no consigo hacerlo funcionar. En teoría no me parece dificil de hacer pero como soy un paleto con estas cosas xD
Seguiré mirándolo a ver si puedo dar con la solución.
No obstante tienes el efecto acordeón que es un plugin pero que habría que adaptar para indexhibit:
anieto2k.com/2006/11/15/expandable-sidebar-menu-el...
si, lo había encontrado, pero no sé cómo adaptarlo a indexhibit… estoy seguro que se puede hacer y no debe de ser muy difícil puesto que ya he visto varias páginas así, pero ni idea de cómo hacerlo aún. Gracia de nuevo por tu ayuda.
Luis Arpa
Señores… he logrado instalar el famoso menu acordeon… segun los cuatro pasos magicos de SKEKU.
Ahora remito a una pregunta que Silvia… mas arriba diagnosticaba…
LA DESAPARICIÓN DEL “THICKBOX” solo aparece el icono de carga y la difuminación del fondo, pero ¡O CRUEL DESGRACIA! desaparece la imagen.
Como puedo solucionar el problema…
saludos, y feliz dia de la Marmota
Pues a mi no me funciona en Firefox. En donde si me funciona es en Safari. No lo he probado en más, pero me resulta extraño que en Firefox no vaya. he probado con varias versiones de jquery, por si las moscas, pero nanai de la china. alguna solución?
@ant0n y el de mi portfolio sí te funciona bien? Lo digo para que pruebes con el código del mío, aunque teóricamente es el mismo :S
@Luis
Para hacer que se oculten las demas opciones al clickar la que queremos puedes hacer lo siguiente:
El el fichero collapsable.menu.js
subtituye la funcion:
//Expandir y ocultar
$(”#menu ul li.section-title”).click(function(){
$(this).nextAll().slideToggle(”fast”);
});
por esta otra:
//Expandir y ocultar
$(”#menu ul li.section-title”).click(function(){
$(”#menu ul li.section-title”).nextAll().hide();
$(this).nextAll().slideToggle(”fast”);
});
esto hara que se abra la seccion selecionada y se cierre la anterior
@notboolean gracias por compartirlo!
Gracias!!!
Hola!
A mi me gustaría saber como puedo conseguir que cuando cliques en una sección del menú se quede activada. He visto que Thenine en su página lo tiene, que el menú se queda activado donde estas. Pero no consigo hacerlo (y eso que he mirado si tiene alo diferente, etc.). Sabéis como se hace?
Hola,
Llevo horas leyendo por todas partes como hacer el menú acordeón y … Yo no tengo mucha idea de diseño Web, así que siento preguntar cosas obvias.
A qué se refiere a subir a nuestro espacio web? y lo de hacer la llamda desde el index.php es esto verdad?
Deberas siento preguntar estas chorradas, si alguien puede resolverme la dudilla.
Muchas gracias !
Eva, estás en lo correcto
Lo de subirlo a nuestro espacio web me refiero a que debes acceder mediante un programa FTP (Filezilla por ejemplo) al alojamiento que tengas para tu página web. Tienes algo de info sobre esto en la ayuda de CDmon por ejemplo:
info.cdmon.com/index.php?page=subir-una-pagina-web...
Sobre la llamada en el index.php, es correcto lo que dices
@Dani, se me ha pasado tu comentario, lo miro a ver.
@ZAPIRO
A mi me ocurría lo mismo. La solución para usar Thickbox y Menú Expandible con jQuery 1.3.2 es eliminar una “@” del código de jquery.thickbox.js. Es la única @ del archivo, pero de todas formas, por si no la encuentras, es la línea 79.
Funciona en firefox y en safari, no he podido probarlo en otros navegadores.
Espero haberte ayudado.
Un saludo
Yo he podido arreglar el problema del thickbox como dijo Pablo, pero ahora no funciona en Explorer 8, aunque ya no se queda la animación de carga. En Chrome, Safari y Firefox funciona perfecto.
Una pregunta, a ver si alguien me sabe decir ya que no me entero mucho: ¿Cómo modifico el estilo de los elementos que están dentro del acordeón para que, por ejemplo, el color sea distinto al del título de la sección?
Hola a todos.
He probado lo que pones y a mi me fucniona a medias. Los sub menús de la izquierda se pliegan como ha de ser, pero cuando clicko una opción de ese menú (imaginemos una opción en el submenú 3), me abre la página que toca en la derecha, pero vuelve a la primera opción en el menú de la izquierda.
Alguna solución? Muchas gracias.
@Xavier, sé a lo que te refieres. Eso pasa porque al recargar la página, no se le pasa ninguna “etiqueta” o clase para definir cuál está activa.
No debe ser complicado. Si me das un poco de tiempo, lo miro
@Xavier, te he releído y no te he contestado correctamente creo. Has probado a emplear el código que tengo yo en el portfolio por ejemplo? Debería ser igual y tendría que funcionarte :S
Lo tengo aqui:
criteriondg.info/portfolio/ndxz-studio/site/js/efe...