Foros del Web » Creando para Internet » CSS »

Eatados de menú horizontal

Estas en el tema de Eatados de menú horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/07/2008, 04:10
Avatar de Xavi23  
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Eatados de menú horizontal

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!!!!
  #2 (permalink)  
Antiguo 09/07/2008, 05:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Eatados de menú horizontal

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.
  #3 (permalink)  
Antiguo 09/07/2008, 05:38
Avatar de Xavi23  
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Eatados de menú horizontal

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!!!
  #4 (permalink)  
Antiguo 09/07/2008, 06:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Eatados de menú horizontal

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.
  #5 (permalink)  
Antiguo 09/07/2008, 06:26
Avatar de Xavi23  
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Eatados de menú horizontal

Genial genial genial geniaaaaaaaaal!!!

Muchisisisimas gracias Mikel ;)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:45.