Por usabilidad, siempre es recomendable dejarle claro al usuario dónde está parado dentro del sitio. Existen varias maneras de hacerlo, desde dejar evidente en el <title> en qué sección se está, pasando por mostrar un pequeño mapa de navegación desde y hasta dónde está ubicado (Inicio > Quiénes Somos > Empleados por ejemplo) o dejar seleccionado en el menú de navegación dónde uno está parado, con una clase especial. En este caso, en sitios pequeños a medianos, recomiendo utilizar un pequeño y simple truco que involucra HTML y CSS.
Hagamos un layout muy simple. En este caso, un menú con listas y un contenido sólo para que no esté tan vacío (reciclaré el HTML de un post anterior):
<div id="menulateral">
<ul>
<li><a href="#" class="selected1">Item Uno</a></li>
<li><a href="#" class="selected2">Item Dos</a></li>
<li><a href="#" class="selected3">Item Tres</a></li>
</ul>
</div>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………</p>
</div>
Como se dieron cuenta, cada ítem del menú tiene una class="selected" con diferencias numéricas consecutivas (este es mi criterio, utilicen el que más les convenga) . El truco está en darle al <body> un ID específico, en este caso será uno para cada sección de nuestro menú, en total 3. Con este ID, mediante CSS le daremos un estilo para cada class selected, así si nos encontramos ubicados por ejemplo en el HTML con el id="item2", gatillará que la class selected2 de ese ID será desplegada. ¿Se entendió? Mejor sigo con el código CSS para que quede más claro:
body#item1 a.selected1, body#item2 a.selected2, body#item3 a.selected3 {
text-decoration: none;
padding-left: 10px;
}
Entonces, nuevamente, tenemos 3 páginas HTML cada una con un ID diferente, de acuerdo con la sección en que estamos. Cada <a> del menú tiene una class diferente también, para poder diferenciarlas. La idea es con el CSS poder manejar el estilo para mostrar al usuario que estamos ubicados en esa parte del sitio sin tener que tocar el HTML, basta con dejar las classes siempre puestas, pero con diferentes ID’s en el < body>.
Ver HTML final (view source para más detalles)
Comentarios
Me ha parecido muy bueno, gracias por el truco.
Buenas!!! Me gustaría saber tu opinión acerca de qué libro,tutorial…recomiendas para empezar en esto del CSS. Hoy he visto una web(cssbasics.com) pero está en ingles y aunque algo entiendo no creo que sea lo mismo.
Gracias
Muy bueno Hermano, gracias!!!
Hola!
Yo creo que hay mejores formas de conseguir lo que planteas. Me parece un tanto innecesario añadir un id y una clase (en CSS y HTML) distinta para cada elemento de un menú porque se perdería la flexibilidad de los estilos y se necesitaría añadir una regla en el css cada vez que se tocara la estructura HTML, o sea, cada vez que se agregara un elemento al menú.
Además, asignar clases distintas a los de una lista se puede abreviar agregando un id o clase a su elemento padre , para así acceder a los de forma:
ul#miId li
Yo acostumbro hacer algo un poco más breve y simple:
CSS:
ul#menu li a { color:#c00; }
ul#menu li a.activo { font-size:2em;}
HTML:
Inicio
acerca de
blog
Lo que planteas podría ser útil de ser requerido un estilo completamente diferente para cada página, no solo para al elemento activo del menu, sino para el cuerpo, encabezado o cualquier otro elemento.
Saludos desde México, excelente portal ;)!
Ups… el código se interpretó. A ver si ahora si funciona, lo repito completo:
ul#menu li a { color:#c00; }
ul#menu li a.activo { font-size:2em;}
Inicio
acerca de
blog
P.D. qué etiquetas son permitidas?
Grrrr… otra vez… puse el código en http://emb.com.mx/2007/a.html
Cómo le hacemos para poner código? con entidades?
Saludos!
hola ernesto, interesante tu aporte, ya lo habia pensado asi antes, de hecho es la salida mas facil… solo agregar una class al item del menu en q tienes activo o seleccionado. pero la idea del metodo q inclui (creo q no lo deje muy claro) es agregar classes a cada item en todos los HTML’s, con el fin despues de no tener q tocar mas la estructura dle HTML, sino q controlarlo solo don ID’s y classes via CSS. gracias muchas por tu aporte. lo segundo, tienes q agregar el codigo con HTML, sino lo interpreta.
Salu2
Hola Admin, [HTML]con una etiqueta HTML bbcode?[/HTML]
Usa <HTML> generado.
Hola!
Estoy buscando la manera de mostrar el mapa de navegación del tipo “Inicio > Quiénes Somos > Empleados” en mi página, pero no encuentro cómo. He buscado por todos los sitios que se me ocurren y o no se cómo buscar o no lo encuentro. Me puedes ayudar en este sentido?
Gracias
Anna, lo tuyo es menu con listas: Listamatic.
Ernesto, con tu ejemplo igual se debe resolver en 3 partes. La verdad es que si nos explicas a todos ¿Cómo haces para que tu clase “.activo” se haga efectiva en cada uno de los 3 links planteados como ejemplo? hablaria de “no perder flexibilidad..” o “innecesario añadir un id”… no sé, digo no?..de puro curioso que soy no mas… 😀
Saludos Jorge!
Hola!
Esto se podría hacer con imágenes? como sería?
Gracias y saludos!