melkorcete

Via melkorcete <>: "Menú con CSS"

Después de haber dejado claras las bases de una maquetación con estilos, ahora vamos a aprender a hacer un menú solo con XHTML y CSS. La idea es obtener un menú que sin mucha carga de funcionalidad a la página, y sobre todo que sea fácil generarlo vía PHP, utilizando plantillas (que será otra de las cosas que veremos próximamente).

Comenzamos como siempre con el XHTML. Definiremos una capa contenedora y dentro una lista sin ordenar. En los elementos

introduciremos elementos para las opciones de menú y un elemento

para el titulo del menú.

"contenedor">

• "titulo">
  

  Titulo

  
  


• 
  
"http://www.melkorcete.com">Elemento 1

• "http://www.melkorcete.com">Elemento 2


• "http://www.melkorcete.com">Elemento 3


• "http://www.melkorcete.com">Elemento 4


• "http://www.melkorcete.com">Elemento 5

La etiqueta

nos va a permitir varias cosas: generalizar los estilos a nivel de fuente, ya que declararemos uno solo para el y así el titulo quedara diferenciado. Además para que los estilos de tipo li:hover no afecten al titulo, crearemos uno que tenga los li:hover igual que el titulo. Eso dará un efecto distinto a los li pero no cambiara el titulo.

Además, para ver aun mas posibilidades añadiremos una imagen transparente de viñeta y en el li:hover pondremos otra del mismo tamaño que si se vera, lo que creara una mayor sensación al usuario (aunque sea demasiado sobrecargado, luego no hay por que usarlo todo, eso como siempre a gusto del consumidor ). Ahora el CSS.

// Reiniciamos los Margenes para partir de cero
* {
margin: 0px;
padding: 0px;
font-family: Verdana;
text-decoration: none;
color: #000000;
}

// Declaramos el contenedor
.contenedor {
display: block;
position: absolute;
width: 150px;
top: 150px;
left: 150px;
}

// Aquí empiezan los estilos en cascada.
// Lista
.contenedor li {
list-style: none;
list-style-image: url(blank.gif);
list-style-position: inside;
padding-left: 0px;
font-size: 11pt;
background-color: #ADD8E6;
}

// Lista con efecto rollover
.contenedor li:hover {
background-color: #32CD32;
list-style-image: url(arrow.gif);
}

// Titulo del Menu
.contenedor h4 {
font-size: 12pt;
font-weight: bold;
color: #ffffff;
}

// Porpiedades para el titulo
.contenedor .titulo {
background-color: #1E90FF;
list-style-image: none;
padding-left: 5px;
}

// Evitamos el :hover en el titulo
.contenedor .titulo:hover {
background-color: #1E90FF;
list-style-image: none;
}

// Estilos de los enlaces
// links, visitados y activos
.contenedor a:link a:visited a:active {
color: #000000;
text-decoration: none;
}

// Enlace Seleccionado
.contenedor a:hover {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}

Ahora que ya esta el CSS, es el momento de dejarlo a vuestro gusto: Sin fondos y solo enlaces, solo las imágenes, con otras viñetas... como os plazca, pero con una base como esta.

Os dejo un enlace a un .ZIP con los archivos (.HTML, .CSS y los .GIF).

Artículos Relacionados:

• 25 Ago # Bases de la Maquetación con CSS
• 31 Jul # Unos trucos de CSS