como tener activa una opcion de menu con css

Gaby_Corr · #1 (**permalink**) 28/05/2007, 10:13

Bueno, estoy revisando este codigo y resulta que tengo la duda de como dejar activa la opcion del menu que esta viendo el usuario.
se supone q es con el active no? pero no me funciona que hago ?

Código:

.shadetabs{
background-color: #ffcc33;
margin-bottom: 0;
width: 800px;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
list-style-type: none;
text-align: center; }

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 4px;
margin-right: 0;
border: 0 solid #778;
color: #ffffff;
}

.shadetabs li a:visited{
color: #2d2b2b;
background-color: #ffcc33;
}

.shadetabs li a:hover{
background-image: url(../images/sactive.gif);  
text-decoration: underline;
color: #2d2b2b;
background-color: inherit;
}

.shadetabs li a:active{
background-image: url(../images/msh.gif); 
text-decoration: underline;
color: #yellow;
background-color: yellow;
}


.shadetabs li.selected a{ 
background-image: url(../images/sactive.gif); }

.shadetabs li.selected a:hover{ 
text-decoration: none;
}

JHMorales · #2 (**permalink**) 28/05/2007, 12:28

Hola:
el active se refiere al botón con link cuando se le presiona. Para que se vea distinto puedes usar algún caracter especial que lo pondrás al comienzo o al final del texto del botón en el link correspondiente a la página. Puede ser » (cierre de comillas angulares que parece una doble flecha) ó > (cierre de etiquetas). Algo como:
»Inicio
Inicio>

Suerte. Jorge H.

Gaby_Corr · #3 (**permalink**) 28/05/2007, 16:51

no te entendi bien

si esta de esta forma tu dices q lo ponga asi?

<div class="shadetabs">
<ul>
<li><a href="default.asp" target="_self">»INICIO</a></li>
<li><a href="qs.asp" target="_self">»¿Qs?</a></li>
</div>

sino es asi.. entonces como? no encuentro nada en la red

JHMorales · #4 (**permalink**) 29/05/2007, 01:40

Hola:
justo como lo escribes está bien, es un truco sencillo pero que te señala el link activo.

Suerte. Jorge H.

Gaby_Corr · #5 (**permalink**) 30/05/2007, 08:58

pero si lo pongo asi, cada vez que le de click a cada opcion del menu se va a poner y si ya paso por todas las opciones pues no va a distinguir el visitante en que opcion esta, si me explico ?

no habra otra forma de hacerlo?

manujav · #6 (**permalink**) 30/05/2007, 10:11

a:active solo funciona en la misma página, es decir, si tu enlace te manda a otra página, el active ya no funciona. Por ejemplo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
text-decoration:none;
color:red;
}

a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}


</style>
</head>

<body>
<a href="#" title="link 1">LINK 1</a><br />
<a href="#" title="link 2">LINK 2</a><br />
<a href="#" title="link 3">LINK 3</a><br />
<a href="#" title="link 4">LINK 4</a><br />

</body>
</html>

Aqui puedes ver como active te mantiene la opción en donde te encuentras.

Para enlaces que te lleven a otra página, puedes crear una clase que convierta el link en el que te encuentras en el link a:active, por decirlo asi...
Por ejemplo:

pagina1.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
text-decoration:none;
color:red;
}

a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}

.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}

</style>
</head>

<body>
<a href="pagina1.html" title="link 1"><p class="vis">LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>

</body>
</html>

pagina2.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
text-decoration:none;
color:red;
}

a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}

.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}

</style>
</head>

<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p class="vis">LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>

</body>
</html>

pagina3.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
text-decoration:none;
color:red;
}

a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}

.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}

</style>
</head>

<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p class="vis">LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p>LINK 4</p></a>

</body>
</html>

pagina4.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
a:link, a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
text-decoration:none;
color:red;
}

a:active
{
text-decoration:none;
color:green;
background-color:yellow;
}

.vis
{
text-decoration:none;
color:green;
background-color:yellow;
}

</style>
</head>

<body>
<a href="pagina1.html" title="link 1"><p>LINK 1</p></a>
<a href="pagina2.html" title="link 2"><p>LINK 2</p></a>
<a href="pagina3.html" title="link 3"><p>LINK 3</p></a>
<a href="pagina4.html" title="link 4"><p class="vis">LINK 4</p></a>

</body>
</html>

Como puedes ver la clase "vis" tiene el mismo contenido que a:active.
Esta clase esta colocada en cada uno de los enlaces de la página en la que te encuentras.

Espero haber ayudado.

JHMorales · #7 (**permalink**) 30/05/2007, 11:56

Hola:
lo que haces es poner la marca en el link de la página correspondiente, en el link de inicio en la página de inicio, en el link de fotos en la página de fotos, etc.

Suerte. Jorge H.

Gaby_Corr · #8 (**permalink**) 30/05/2007, 12:46

oye jhmorales ps no entiendo lo q comentas, yo mando llamar el menu por un archivo externo, q no esta incluido en cada pagina =S

 en cada pagina

voy a probar loq ue dice manujav y ya les digo..

thanks!