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?