menúes y la class .selected

15/mar/2007 13

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)

Ver Hoja de Estilos Final

Comentarios

  1. Jero [#]

    Me ha parecido muy bueno, gracias por el truco.

  2. Pedro Blanco [#]

    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

  3. Pedro Rogério [#]

    Muy bueno Hermano, gracias!!!

  4. Ernesto [#]

    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 ;)!

  5. Ernesto [#]

    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?

  6. Ernesto [#]

    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!

  7. CSSLab Admin [#]

    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

  8. Ernesto [#]

    Hola Admin, [HTML]con una etiqueta HTML bbcode?[/HTML]

  9. CSSLab Admin [#]

    Usa <HTML> generado.

  10. Anna [#]

    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

  11. CSSLab Admin [#]

    Anna, lo tuyo es menu con listas: Listamatic.

  12. Diego Díaz [#]

    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!

  13. Lazur [#]

    Hola!
    Esto se podría hacer con imágenes? como sería?

    Gracias y saludos!

Responder a Ernesto ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab