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!!!!
