menu horizontal

subirol · #1 (**permalink**) 11/03/2009, 05:45

Hola a tod@s de nuevo, estoy haciendo un menú similar al de la web: http://cssvault.com/gallery/ , pero no me funciona del todo, cuando entro en una de las secciones de la página el botón no me mantiene la configuración de activo y pasa a estado normal, no se si me falta algo dejo el codigo haber si me podeis echar una mano.

Código:

#header { width:644px; margin-top: 2px; height:29px; border-bottom:1px solid #F60; }


#header em { display: none}
#header ul { width: 100%; float: left; padding: 0px; margin: 0px; list-style-type: none;}
#header li { float: left; padding: 0px; margin: 0px; display: inline}
#header li a { DISPLAY: block; HEIGHT: 30px }

#header li a.empresa { background: url(gfx/01.png) no-repeat left top; WIDTH: 120px }
#header li a.empresaActive { background: url(gfx/01.png) no-repeat left bottom; WIDTH: 120px }
#header li a.servicios { background: url(gfx/02.png) no-repeat left top; WIDTH: 120px}
#header li a.serviciosActive { background: url(gfx/02.png) no-repeat left bottom; WIDTH: 120px}
#header li a.tiendas { background: url(gfx/03.png) no-repeat left top; WIDTH: 120px}
#header li a.tiendasActive { background: url(gfx/03.png) no-repeat left bottom; WIDTH: 120px}
#header li a.contacto { background: url(gfx/04.png) no-repeat left top; WIDTH: 120px}
#header li a.contactoActive { background: url(gfx/04.png) no-repeat left bottom; WIDTH: 120px }

#header li a:hover { background-position: left bottom 
}

Código HTML:

 <div id="header">
            <ul>
                <li><a class="empresa" href="/"><em>empresa</em></a></li>
                <li><a class="servicios" href="servicios.htm"><em>servicios</em></a></li>
                <li><a class="tiendas" href="tiendas.htm" title="puntos de venta de Blucom"><em>tiendas</em></a></li>
                <li><a class="contacto" href="contacto.htm"><em>contacto</em></a></li>
            </ul>
        </div>

emiliodeg · #2 (**permalink**) 11/03/2009, 06:25

bueno me parece q tu problema esta en donde debes activar con una clase
cuando estes en servicios por ejemplo en vez de ser

<li><a class="servicios" href="servicios.htm">servicios</a></li>

tienes q cambiar servicios por serviciosActive

<li><a class="serviciosActive" href="servicios.htm">servicios</a></li>

asi te mostrara q esta marcada la pestaña
saludos

subirol · #3 (**permalink**) 11/03/2009, 06:31

Gracias, emiliodeg, pero eso se supone que lo deveria hacer de forma automatica por que si yo me pongo encima y no pincho si me coje la clase serviciosActive, no se si me explico

emiliodeg · #4 (**permalink**) 11/03/2009, 06:46

claro pero pq tienes esta declaracion
#header li a:hover { background-position: left bottom
}
donde al hacer hover te cambial el fondo, pero cuando cambies de pagina vas a tener q ponerle la clase correspondiente

otra tecnica (la cual uso yo) es la de ponerle un id al body
ejemplo
<body id="paginaservicios">
....
<div id="header">
<ul>
<li><a class="empresa" href="/">empresa</a></li>
<li><a class="servicios" href="servicios.htm">servicios</a></li>
....

y de ahi defines para cada pagina cual pestaña marcar

entonces tendrias
#header li a.servicios { background: url(gfx/02.png) no-repeat left top; WIDTH: 120px}
y para marca servicios en la pagina paginasericios
#paginaservicios #header li a.servicios { background-position: left bottom}
deberias hacer lo mismo con todas la pagians

saludos

subirol · #5 (**permalink**) 11/03/2009, 09:16

Gracias, me has salvado la vida, un saludo.