Foros del Web » Creando para Internet » CSS »

Fijar enlace activo en menu de listas

Estas en el tema de Fijar enlace activo en menu de listas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2006, 16:21
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Fijar enlace activo en menu de listas

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?
  #2 (permalink)  
Antiguo 14/05/2006, 16:54
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
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.
  #3 (permalink)  
Antiguo 16/05/2006, 13:01
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
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 06:35.