No sé cómo poner el botón activado en la página que se encuentra el usuario

Loiserl · #1 (**permalink**) 29/10/2009, 16:04

Hola,
Estoy armando un sitio y tengo un menú horizontal creado en CSS. Los botones cambian a color degradé cuando paso encima con el mouse.

Sin embargo, cuando me encuentro en "incio", "clientes", "contacto", etc., etc. no se nota diferencia en el menú. Es decir, no se muestra el botón activo de la página correspondiente.

He leído algo al respecto, pero debo ser yo con el código o no sé, pero no puedo darle solución. No sé si se soluciona con CSS o con PHP. En todo caso, por favor indicarme cuál es la mejor opción. Yo aquí les muestro el código CSS y el HTML para que puedan ver cómo se soluciona esto. Un abrazo.

Código:

#nav {
    margin:0;
	padding: 0 0 20px 10px;
	background: url(menu_bg.jpg) repeat-x;
	}

html>body #nav {
	padding: 0 0 38px 0px;
	}



#nav li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}
	
#nav a:link, #nav a:visited {
	float: left;
	font-size: 18px;
	line-height: 38px;
	font-weight: bold;
	padding: 0 47px 0px 47px;
	text-decoration: none;
	color: #FFF;
	}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
	color: #FFF;
	background: url(menu_bg-active.jpg) repeat center;
	}

#nav a#flag:link.active, #nav a#flag:visited.active, #nav a#flag:hover {

}

Código HTML:

<ul id="nav">
	<li><a "#">Inicio</a></li>
	<li><a href="services_es.htm">Nuestros servicios</a></li>
	<li><a href="trabajos_es.htm">Trabajos</a></li>
	<li><a href="customers_es.htm">Clientes</a></li>
	<li><a href="contact_es.htm">Contacto</a></li>

</ul>

Espero que puedan ayudarme. Llevo en esto un día y medio dando vueltas. Saludos.

WinderJerter · #2 (**permalink**) 29/10/2009, 21:16

hola k tal loisel no se si te refieres a esto

ejemplo: http://www.pk-network.co.cc/

saludos!!!

Loiserl · #3 (**permalink**) 29/10/2009, 21:29

Hola WinderJerter,
Veo que en el ejemplo los tabs cambian de acuerdo a las páginas. Sí, eso quiero, pero con color degradé. Para ello uso unas imágenes de 1px de ancho para fondo y para activo.

El problema es que no sé cómo hacerlo de forma más automática. Estoy estancado justamente en este problema y no puedo publicar hasta solucionarlo.
Saludos!

AlbertoGarcia · #4 (**permalink**) 29/10/2009, 21:53

Hola, hay varias formas de hacer lo que quieres. La más imple es darle un id="current" (p. ej.) al enlace de la página que está cargada y a este id darle el estilo que quieras. El problema de este método es que tienes que editar una a una todas las páginas poniendo el id en el enlace correspondiente a cada una.

Código html:

Ver original<ul id="nav">
    <li><a id="current" href="#">Inicio</a></li>
    <li><a href="services_es.htm">Nuestros servicios</a></li>
    <li><a href="trabajos_es.htm">Trabajos</a></li>
    <li><a href="customers_es.htm">Clientes</a></li>
    <li><a href="contact_es.htm">Contacto</a></li>
 
</ul>

Otro método sería darle un id al body de cada página y otro a cada enlace del menu y luego darle estilo a la combinación de ambos. De esta forma:

Código html:

Ver original<body id="pg_inicio">
<ul id="nav">
    <li><a id="inicio" href="#">Inicio</a></li>
    <li><a id="servicios" href="services_es.htm">Nuestros servicios</a></li>
    <li><a id="trabajos" href="trabajos_es.htm">Trabajos</a></li>
    <li><a id="clientes" href="customers_es.htm">Clientes</a></li>
    <li><a id="contacto" href="contact_es.htm">Contacto</a></li>
 
</ul>

Código css:

Ver original#pg_inicio #inicio,
#pg_servicios #servicios,
#pg_trabajos #trabajos,
#pg_clientes #clientes,
#pg_contacto #contacto {
    color: #FFF;
    background: url(menu_bg-active.jpg) repeat center;
}

Yo prefiero este último porque es más amigable a la hora de hacer ediciones posteriores.

Salud!

Loiserl · #5 (**permalink**) 29/10/2009, 22:00

Gracias Alberto,
Veré lo que dices. Igualmente, hay una cosa que sería de gran ayuda, creo, y es programar una función con PHP que al tomar un nombre de la página ejecuta una acción determinada en el botón correspondiente.

La página irá en PHP, así que yo pensaba que algo así sería perfecto. Sin embargo, no he conseguido una solución con PHP. Vi un tutorial, pero me salió cualquier cosa.
Saludos.

AlbertoGarcia · #6 (**permalink**) 30/10/2009, 04:58

Para conseguir ayuda para hacerlo en php, busca y/o postea en el subforo de php, en este sólo te vamos a dar soluciones css.

De todos modos el segundo ejemplo lo puedes usar con un include ya que el menú no cambia en ninguna página, sólo cambia el id del body y así lo tendrías en un sólo archivo. Además si tuvieras que añadir o quitar opciones del menú en el futuro sólo tienes que tocar el archivo del menú y una regla de css.

Salud!