Fijar enlace activo en menu de listas

kahlito · #1 (**permalink**) 14/05/2006, 15:21

Hola estoy haciendo un menú de listas donde dejo en cada apartado la opción activa activada según el apartado donde se encuentre la web, por ejemplo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
#menu {
	float:right;
	width: 205px;
	margin: 10px 1px 10px 20px;
	background-image: url(imagenes/fondo_menu_final.jpg);
	background-repeat: no-repeat;
	height:450px;
	}
	#menu ul {
	margin: 0;
	margin-top:10px;
	padding: 0;
	list-style-type: none;
	color:  #58483c;
	}
	#menu li a {
	voice-family: "\"}\"";
	voice-family: inherit;
	text-decoration: none;
	margin-left:15px;
	margin-right:15px;
	padding:1px 5px;
	background-image: url(imagenes/fondos_menu.jpg);
	background-repeat: no-repeat;
	color:  #58483c;
	}
	#lista_menu li a:visited {
	display: block;
	padding:1px 10px 1px 5px;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:0.8em;
	height:25px;
	text-align:right;
	}
	#menu li a:link {
	display: block;
	padding:1px 10px 1px 5px;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:0.8em;
	height:25px;
	text-align:right;
	}
	#menu li a:hover {
	color: #fff;
	padding:1px 10px 1px 5px;
	background-image: url(imagenes/fondos_menu_hover.jpg);
	background-repeat: no-repeat;
	}
#active a:link, #active a:visited, #active a:hover
{
background-image: url(imagenes/fondos_menu_hover.jpg);
color: #fff;
}
</style>
</head>

<div id="menu">
<ul id="lista_menu">
<li id="active"><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>
</div>
</html

Donde según el apartado lo activo con

Código HTML:

<li id="active"><a href="#">Enlace 1</a></li>

pero claro lo tendria que hacer enlace por enlace en el caso de que esté en el apartado 2

Código HTML:

<li><a href="#">Enlace 1</a></li>
<li id="active"><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>

luego el 3

Código HTML:

<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li id="active"><a href="#">Enlace3</a></li>

etc etc,

Por otro lado si lo meto desde un include php solo me aceptaria una opción con un mismo menú...

¿hay alguna manera desde css que haga que no tenga que cambiar ese active apartado por apartado? es decir que me salga id="active" automaticamente según el apartado, ¿o eso solo es posible con javascript o php?

mbavio · #2 (**permalink**) 14/05/2006, 15:54

Existe una tecnica muy bonita, que se basa en la clase/id del elemento body...

Como funciona? Supongamos que tenemos un menu de paises, Argentina, Brasil, España y Mexico...

en tu css pones:

.argentina .vinculoquequierocambiar, .brasil .vinculoquequierocambiar,
.españa .vinculoquequierocambiar, .mexico .vinculoquequierocambiar { estilos caracteristicos}

y luego vas cambiando la clase del body, o de otro elemento superior a la lista de enlaces, de acuerdo a la pagina donde te encuentres.

Es muy facil, y sirve no solo para esto, podemos hasta cambiar un layout de 2 a 3 columnas solo cambiando la clase del body.

Espero que se me haya entendido. Saludos.

kahlito · #3 (**permalink**) 16/05/2006, 12:01

Hola mbavio, sí que te había entendido, seguí tus consejos y me funcionaron perfectamente

Por otro lado tambien he encontrado un enlace de lo mismo:

http://www.juque.cl/weblog/2005/03/1...stas-aqua.html

Gracias mbavio, un saludo