Eatados de menú horizontal

Xavi23 · #1 (**permalink**) 09/07/2008, 03:10

Muy buenas!
En primer lugar, enhorabuena por el foro, es genial.

Estoy haciendo un menú horizontal dentro de una capa en la que voy repitiendo en cada <li> mediante estilos una imagen de background donde aparecen todas las opciones de menú con sus estados y que voy variando con un backgroun-position.

La imagen es esta:

El funcionamiento es el siguiente:
Cuando estan en estado normal (de reposo) se encuentra en posición 0 vertical, por lo tanto se ven las opciones de menú en color gris.
En cuanto se posiciona el cursor sobre una de las opciones de menú, cambia la posición del background verticalmente, apareciendo la misma opción de menú, pero en naranja.
Hasta ahí todo correcto...

Mi duda es: ¿Como le asigno una posición para cuando se encuentran activos, es decir, identificando que esta en esa pagina.

El código es este:

Código:

	<div id="nav">
	
	    <ul id="menu">
		<li id="nave1"><a href="index.php" title="PORTADA"></a></li>
		<li id="nave2"><a href="/" title="INGENIERÍA"></a></li>
		<li id="nave3"><a href="/" title="GESTIÓN INTEGRAL"></a></li>
		<li id="nave4"><a href="/" title="PROJECT MANAGEMENT"></a></li>
		<li id="nave5"><a href="/" title="TERCIARIO: OFICINAS Y RETAIL"></a></li>				
	    </ul>
					
	</div>

Y en el CSS tengo esto:

Código:

/***************NAVEGACION SUPERIOR****************/

#menu {padding:0;display:table; width:670px; display:table;margin:0 auto;vertical-align:center;text-align:center; border:0px solid #fff; }
#menu li {display:inline;float:left;list-style:none; margin-top:0px;}
#menu li a {float: left;overflow: hidden; background: url("../img/nav.jpg") 0 0 no-repeat; height:40px;}

/* BOTONES */
#menu li#nave1 a { background-position: 0 0; width: 90px;}
#menu li#nave2 a { background-position: -90px 0; width: 90px;}
#menu li#nave3 a { background-position: -180px 0; width: 120px;}
#menu li#nave4 a { background-position: -300px 0; width: 170px;}
#menu li#nave5 a { background-position: -470px 0; width: 190px;}

/* BOTONES HOVER */
#menu li#nave1 a:hover { background-position: 0 -41px;}
#menu li#nave2 a:hover { background-position: -90px -41px;}
#menu li#nave3 a:hover { background-position: -180px -41px;}
#menu li#nave4 a:hover { background-position: -300px -41px;}
#menu li#nave5 a:hover { background-position: -470px -41px;}

Espero que me haya¡s entendido, la verdad es que es un rollo que no veas...
Muchas muchas muchas GRACIAS!!!!

Mikmoro · #2 (**permalink**) 09/07/2008, 04:01

Si el menú es nuevo para cada página, quiero decir, si no se carga con un include siempre el mismo sino que está el código incrustado en cada página, lo más fácil es añadir una clase al botón activo y asignar ese desplazamiento del background a esa clase.

Mikel.

Xavi23 · #3 (**permalink**) 09/07/2008, 04:38

Buenas Mikmoro,

el menú se encuentra en un archivo a parte. ¿Cómo hacerlo así?
¿o me recomiendas que lo ubique en la misma página preferiblemente?

Muchas gracias!!!

Mikmoro · #4 (**permalink**) 09/07/2008, 05:06

Bueno, si lo quieres hacer con un menú con include hay un bonito truco que comentamos un par de veces por aquí.

Mira este enlace a ver si lo ves claro.

Esta es la hoja de estilo. Fíjate sobre todo en el último selector. Se trata de dar un id al body.

Mikel.

Xavi23 · #5 (**permalink**) 09/07/2008, 05:26

Genial genial genial geniaaaaaaaaal!!!

Muchisisisimas gracias Mikel ;)