Foros del web, para los que viven de bits

kahlito · 14-may-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 · 14-may-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 · 16-may-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

16-may-2006, 12:01	#3 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.571	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 __________________ Portafolio Diseño Web Freelance

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

14-may-2006, 15:54	#2 (permalink)
mbavio Fecha de Ingreso: agosto-2005 Mensajes: 289	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.