El tipico problema de los menus (on y off)

#1 (**permalink**) 27/02/2014, 14:18

Se que esta pregunta la han hecho muchas veces pero hasta que no te tocaaa...

Resulta que los menus de mi web estan hechos con el modulo 'NICE MENUS'.
https://drupal.org/project/nice_menus

Pues bien, quiero lo de todo el mundo quiere:

- Que cuando este en la pagina (por ejemplo) 'HOME'. El link 'HOME' aparezca en negrita, destacado de los demas, etc... y cuando este en la pagina 'TIENDA' el link 'TIENDA' aparezca en negrita, etc...

Para poder hacer algo asi, obviamente debe de aparecer en el HTML una clase que dijera algo asi como... 'class="activo"', pero no aparece nada. Todos los LI's del menu son exactamente iguales, entonces... ¿como lo hago para destacar el 'HOME' o 'TIENDA'?

THX!!!!!!!!!

JustinKO · #2 (**permalink**) 27/02/2014, 15:43

Con javaScript es muy fácil, aunque supongo que preferirás prescindir de esto ¿verdad?

No conozco ese módulo pero ¿no tienes forma de incluir un id o clase que diferencie a cada uno de los elementos li del menú?

porque si pudieras no te haría falta más que un poco de CSS. Mira este código:

Código HTML:

Ver original<body class="pag_home">
<ul>
    <li id='menu_home'>home</li>
    <li id='menu_contacto'>Contacto</li>
</ul>
</body>

Código CSS:

Ver original.pag_contacto #menu_contacto, .pag_home #menu_home{
    
    color: green;
 
}

Si te das cuenta, el body siempre tiene una clase que es la que diferencia (nombra) a la página, si es una página nodo pondrá algo así como .page-node-154 si es de taxonomía pondrá algo como .page-taxonomy-term-154 . Así que lo que tendrías que hacer es en CSS decirle que te ponga el menú "x" que esté en la página "x" en negrita o que te ponga el menú "y" que esté en la página "y" en negrita. Vamos que si el menú y la página coinciden se destaca el li.

aquí puedes hacer la prueba alternandole al body la clase .pag_home por .pag_contacto y viceversa .
En tu página solo tendrías que ver la clase del body que diferencia a la página.

Si no te deja el módulo incluir clase o id que diferencie al menú lo puedes hacer con :nth-child(1), :nth-child(2), :nth-child(3)

Esta es una manera para hacerlo sin javascript ni php, aunque lo óptimo sería como tú dices, poder poner una clase active al menú desde el código de drupal pero eso yo no sé hacerlo.

Saludos

MarioAraque · #3 (**permalink**) 28/02/2014, 04:07

No se que tan escalable sea eso que vos proponér @JustinKO, pero es una alternativa válida.

Otra opción es usar alguno de estos dos módulos, que seguro te van a servir:

https://drupal.org/project/node_breadcrumb
https://drupal.org/project/menutrails

Saludos.

#4 (**permalink**) 28/02/2014, 15:16

Muchas gracias a los 2. Estudiare ambas posibilidades. La semana que viene me pongo con esto!

Pero cuando Justinko me ha recordado que cada pagina tiene su propio ID, me ha venido algo a la cabeza.

Este codigo deberia ser valido:

Código CSS:

Ver original#pagina1 #menu li.opcion1 {font-weigth: bold }
 
en la pagina 2...
 
#pagina2 #menu li.opcion2 {font-weigth: bold }

Dicho de otra manera... al tener cada pagina su ID diferente, es posible crear una ruta css para cada opcion de menu.

¿Esto seria suficiente no?

MarioAraque · #5 (**permalink**) 01/03/2014, 02:21

Si claro, es suficiente!
Yo le veía el problema que si creás otra página y querés que ese menú se active, deberías tocar tus estilos nuevamente. Pero bueno, es una alternativa válida.

Saludos.