Código css para mostrar un menu lateral con resaltado y clickable en toda su extensión

febrero 22, 2007 at 8:56 am 4 comentarios

La técnica se basa en:

  1.  Usar una capa div como contenedor
  2. Crear dentro de la capa enlaces href que se corresponderán con cada una de las filas del menú
  3.  El uso dentro de la hoja de estilo de display: block en el div
  4. Anidar el estilo de los enlaces al div (#left_menu a.sub)
  5. Distinguir con background-color en los estilos asociados a los  estados de los enlaces (hover)

<style>
#left_menu a {
  display: block;
  color: black;
  text-decoration: none;
}

#left_menu a.sub {
  background-color:blue;
}

#left_menu a.sub:hover{
  background-color: red;
}
</style>
<div id=”left_menu”> 
<a href=”#” mce_href=”#” class=”sub”> Models</a>  
<a href=”#” href=”#” class=”sub”>Models 2</a>
<a href=”#” href=”#” class=”sub”> Models 3</a>  
<a href=”#” href=”#” class=”sub”>Models 4</a>

</div>

Este es el resultado

img.png

Anuncios

Entry filed under: Código, css.

Programas para medir el rendimiento de windows: Arrays en bash

4 comentarios Add your own

  • 1. manuel  |  noviembre 30, 2009 en 3:41 pm

    Hola, como estás, tengo clarisimo lo que publicas, mi consulta es la siguiente, hice un sitio en php y el header incluyendo su botonera estan puestos con , esto produce que la misma botonera cargue en todas las paginas utilizadas.
    Como puedo lograr lo mismo que señalas en este post , con una botonera cargada de esta forma ? (que reconozca la pagina en que estoy ).

    Saludos y gracias

    Responder
  • 2. manuel  |  noviembre 30, 2009 en 3:42 pm

    Hola, como estás, tengo clarisimo lo que publicas, mi consulta es la siguiente, hice un sitio en php y el header incluyendo su botonera estan puestos con include, esto produce que la misma botonera cargue en todas las paginas utilizadas.
    Como puedo lograr lo mismo que señalas en este post , con una botonera cargada de esta forma ? (que reconozca la pagina en que estoy ).

    Saludos y gracias

    Responder
  • 3. montblanc plumas  |  abril 23, 2011 en 1:42 am

    Deja un comentario

    Responder
  • 4. ray ban ireland  |  abril 23, 2011 en 7:02 am

    very beautiful!

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Calendario

febrero 2007
L M X J V S D
« Ene   Mar »
 1234
567891011
12131415161718
19202122232425
262728  

Most Recent Posts


A %d blogueros les gusta esto: