Menus CSS 2/2 (Pendiente edicion)

 por Emmet Sáb Abr 10, 2010 2:58 pm

 id="elmenu">
 href="#">Texto del enlace
 href="#" class="seleccionado">Texto del enlace
 href="#">Texto del enlace
 href="#">Texto del enlace

El (X)HTML es prácticamente el mismo, solo le hemos añadido un en el anchor text, y un div a continuación para el contenido...

El CSS es:

Vamos por partes; el código:

#elmenu a {
	display:block;
	float:left;
} 

Quiere decir que los enlaces de la capa #elmenu, se deben comportar como elemento de bloque, es decir, deben generar un salto de línea antes y después de sí. Sin embargo, como se ve en el menú, los enlaces no están unos debajo de otros, sino en línea, esto es por que a continuación le damos un float:left; esto es, deben flotar hacia la izquierda, de modo que los siguientes enlaces se deslicen hacia la derecha. ¿Por que convertir en elemento de bloque y a continuación quitarle los saltos de línea? por que solo a los elementos de bloque se les puede modificar los atributos margin y padding, y necesitamos esas propiedades para poder visualizar las imágenes.

[Tienes que estar registrado y conectado para ver esa imagen]
Funcionamiento del atributo float de CSS

#elmenu a:link, #elmenu a:visited {
	padding-left:19px;
	line-height:30px;
	border-bottom:2px solid #BABABA;
	background:transparent url('images/relleno.jpg') 0px 0px no-repeat;
	color:#600000;
	text-decoration:none;
	font-weight:bold;
} 

En este código, para los estados de reposo de los enlaces, damos un padding-left: 19px; para viualizar 19px de la imagen por la izquierda del texto. A continuación le damos al texto una altura de 30px; esta será la distancia que habrá entre una fila y la inferior (aunque no exista fila inferior de texto como es el caso). Posicionamos la imagen en la coordenada 0px, 0px, y el resto del código, es puramente decorativo e irrelevante para la explicación de este tipo de menús.

#elmenu span {
	display:block;
	float:left;
	background:transparent url('images/derecha.jpg') top right no-repeat;
	padding-right:19px;
	cursor:pointer;
	padding-top:6px;
} 

Vimos que en el código (X)HTML que al texto del enlace (anchor text), lo introducimos entre las etiquetas y ; el motivo es sencillo, si tenemos 2 imágenes a posicionar, necesitamos 2 etiquetas, ya que a una misma etiqueta no se le pueden dar dos background, de modo que convertimos la etiqueta en elemento de bloque y le damos un float:left; tal y como explicamos antes, para ahora sí, poder darle un padding-right de 19px y posicionar allí la imagen. Con respecto al posicionamiento de la imagen, cuando se quiere expresar arriba, abajo, izquierda o derecha, en puesto de buscar con qué pixel corresponde (arriba y a la izquierda siempre es 0px, 0px) se puede expresar con las palabras reservadas top, bottom, left y right. En el siguiente gráfico se ilustra el funcionamiento:

[Tienes que estar registrado y conectado para ver esa imagen]
Posicionamiento de las imágenes en las etiquetas a y span

#elmenu a:hover {
	background:transparent url('images/rellenohover.jpg') 0px 0px no-repeat;
	border-bottom:2px solid #9A6802;
	margin-top:6px;
	line-height:24px;
} 

En el evento hover del enlace cambiamos la imagen y la hundimos. Para hundirla, le quitamos a la altura de la línea (line-height) 6px dándole un valor de 24px (en el estado de reposo era de 30px). Con esto conseguimos que la altura total del background disminuya 6px, pero no los pierde por arriba, sino por abajo; para corregirlo, le damos 6px al margen superior.

.seleccionado {
	background:transparent url('images/rellenoseleccionado.jpg') 0px 0px no-repeat !Important;
	border-bottom:2px solid #225748 !Important;
	margin-top:0px !Important;
	line-height:30px !Important;
} 

Por último, para este menú hemos añadido el estado seleccionado. Simplemente, resalta el apartado en el que estamos, para ello nos creamos la clase seleccionado, donde la imagen es distinta y el line-height vale para simpre 30px. Es importante resaltar la utilización de la claúsula !Important; que evita que se ejecute otros valores para la misma propiedad sobre la misma etiqueta, por ejemplo, si margin-top y line-height no tuviesen estas claúsulas, al pasar el ratón sobre el enlace, saltaría el evento hover y el enlace se hundiría, con estas claúsulas, aunque el evento salta igual, no se interpretan dichos valores, sino los originales.

El resto del código CSS es irrelevante para el menú.

Llegado a este punto decir, que la utilización de un menú horizontal o vertical depende mucho del diseño y el potencial de crecimiento del WebSite. El menú horizontal no puede ser muy grande, y no debería superar un tamaño mayor al de la resolución de pantalla de 800x600, ya que el menú se partirá y no quedará bien. Por el contrario, el menú vertical puede crecer ilimitadamente sin afectar a la estética de la web. El menú horizontal, en principio es más indicado para webs pequeñas, con 4 a 6 apartados y qe no van a necesitar más apartados en un futuro. Aunque en última instancia dependerá del criterio de cada diseñador.