Efecto "you are here" en menús
4 seguidores
Pues he estado mirando por varios sitios como hacer esto, es decir cambiar el estado del botón del menú de la sección en la que estás y si fuese posible desactivar dicho botón, lo que creo que conllevaría un cambio en el marcado XHTML en cada sección de la página (cosa he leído no es muy recomendable).
A ver, ¿cómo lo hacen ustedesssss?!!
Gracias y un saludo
txuma
Solución profesional: utilizando programación servidor.
Si la 1 no es posible: identificando el body y a partir de ahí jugando con la hoja de estilos puedes modificar la 'apariencia' de un elemento en concreto. Un ejemplo:
body#quiensoy ul li.quiensoy {...loquesea...}
De esta forma puedes cambiar el estado, incluso el cursor, pero no desactivar el enlace. Para eso habría que recurrir a otros métodos que no voy a nombrar aquí porque me parecen 'matar moscas a a cañonazos'.
zigotica
asi a bote pronto se me ocurre:
- includes y cambiando el marcado, como dices
- con una variable js que te dice la sección, y luego por js cambias el class
- mejor aun: añadiendo un class al body que te diga la seccion y gestionando los estados por css
...
demssite
txuma
Solución profesional: utilizando programación servidor.
¿A qué te refieres con esto? Porque programación servidor sí que voy a usar pero no entiendo muiy bien a que te refieres.
PD: mu mono el nuevo avatar
orange
O cambias el marcado (en lugar de un enlace metes otra cosa) o cambias el aspecto del enlace por CSS (aplicando una clase o algún tipo de selector descendiente como te ha dicho Sergi).
Y esto lo discriminas en el servidor (sabiendo en qué páginas estas) o a manopla (subiendo páginas distintas).
demssite
¿Y más correcto sería por CSS que cambiando el marcado? ¿o son dos técnicas igual de correctas?
txuma
demssite
¿A qué te refieres con esto?
Borja ya te ha hecho una explicación somera. Como ya sabrás, utilizando algo de programació servidor, el código HTML puede generarse de manera dinámica. De esta forma podrías saber en qué página/sección estás y añadir una clase a un elemento del menú.
Un ejemplo. Este sería tu menú básico:
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
Bien, con programación servidor podrías por ejemplo analizar la URL, y si corresponde a la sección 2, escribes el código HTML de la siguiente forma:
<li>Sección 1</li>
[LI class="actual"]Sección 2[/LI]
<li>Sección 3</li>
No sé si me sigues.
txuma
demssite
¿Y más correcto sería por CSS que cambiando el marcado? ¿o son dos técnicas igual de correctas?
A ver, para resumir las opciones disponibles.
1. Cambiar el marcado por programación servidor
2. Cambiar el marcado 'a mano'
3. Utilizar un marcado común e indicar la sección mediente CSS
Personalmente, y si se puede, opto por la 1. Si esta no es posible, y es un proyecto pequeño, que sé de antemano que va a sufrir pocos cambios, opto por las 2, aunque no me suele gustar mucho. La 3 me parece un poco farragosa porque hay que meter de entrada mucho código HTML 'extra', pero reconozco que la suelo utilizar casi más que la 2 :)
demssite
Perfectamente Txuma, gracias
txuma
Jurs, hemos enviado el último mensaje al mismo tiempo. Eso es compenetración.
demssite
Joer ya ves eso si que es shungo.....
Pues nada volviendo al tema en cuestión optaré por la opción 1, es decir cambiar el marcado, que yo lo entiendo algo así...:
Si tengo un menu que es una lista con enlaces:
<li>[a]Sección 1[/a]</li>
<li>[a]Sección 2[/a]</li>
<li>[a]Sección 3[/a]</li>
mediante marcado que pasase a ser algo así....¿?
<li>[a]Sección 1[/a]</li>
[li class="actual"]Sección 2[/li]
<li>[a]Sección 3[/a]</li>
Lo que no se si es muy correcto es eliminar el enlace de la sección actual.
Bueno muchas gracias muchachos/as
txuma
Efectivamente, esa es la manera.
demssite
Lo que no se si es muy correcto es eliminar el enlace de la sección actual.
Si el elemento del menú corresponde a la página actual, no veo problema en eliminar el enlace. Si corresponde a una sección con varias páginas, yo no lo eliminaría,
demssite
Gracias Txuma, oído cocina!!!
zigotica
d ehecho, si todas las secciones y subsecciones tienen su enlace, lo que yo haría es eliminar el enlace de la página actual pero no poner class (jugando con el css no te hace falta)
<li>[a]Sección 1[/a]</li>
<li>Sección 2</li>
<li>[a]Sección 3[/a]</li>
demssite
zigotica
d ehecho, si todas las secciones y subsecciones tienen su enlace, lo que yo haría es eliminar el enlace de la página actual pero no poner class (jugando con el css no te hace falta)
<li>[a]Sección 1[/a]</li>
<li>Sección 2</li>
<li>[a]Sección 3[/a]</li>
Pues si con selectores se deja listo...
Gracias Sergi
orange
Yo, si personalizas además más cosas (como por ejemplo color de titulares, enlaces...) haría esto:
[body id="seccion"]
<ul>
[li id="mp_seccion"]
</ul>
Y luego en el CSS:
body#seccion #mp_seccion {}
body#seccion a {}
body#seccion h2 {}
Es decir aplicando un ID al BODY tienes control sobre cualquier elemento de la página sin tener que tocar el HTML para nada.