Foros del Web » Creando para Internet » CSS »

como tener activa una opcion de menu con css

Estas en el tema de como tener activa una opcion de menu con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/05/2007, 11:13
Avatar de Gaby_Corr  
Fecha de Ingreso: junio-2005
Mensajes: 672
Antigüedad: 12 años, 6 meses
Puntos: 0
como tener activa una opcion de menu con css

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;
}
__________________
" Recuerda , estas donde debes estar ..."
  #2 (permalink)  
Antiguo 28/05/2007, 13:28
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: como tener activa una opcion de menu con css

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.
  #3 (permalink)  
Antiguo 28/05/2007, 17:51
Avatar de Gaby_Corr  
Fecha de Ingreso: junio-2005
Mensajes: 672
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: como tener activa una opcion de menu con css

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
__________________
" Recuerda , estas donde debes estar ..."

Última edición por Gaby_Corr; 28/05/2007 a las 18:32
  #4 (permalink)  
Antiguo 29/05/2007, 02:40
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: como tener activa una opcion de menu con css

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

Suerte. Jorge H.
  #5 (permalink)  
Antiguo 30/05/2007, 09:58
Avatar de Gaby_Corr  
Fecha de Ingreso: junio-2005
Mensajes: 672
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: como tener activa una opcion de menu con css

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?
__________________
" Recuerda , estas donde debes estar ..."
  #6 (permalink)  
Antiguo 30/05/2007, 11:11
Avatar de manujav  
Fecha de Ingreso: julio-2006
Mensajes: 63
Antigüedad: 11 años, 5 meses
Puntos: 0
Sonrisa Re: como tener activa una opcion de menu con css

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.
__________________
Feo, muy feo foro...
www.electri-k.tk
  #7 (permalink)  
Antiguo 30/05/2007, 12:56
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: como tener activa una opcion de menu con css

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.
  #8 (permalink)  
Antiguo 30/05/2007, 13:46
Avatar de Gaby_Corr  
Fecha de Ingreso: junio-2005
Mensajes: 672
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: como tener activa una opcion de menu con css

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

<!--#include file="includes/menu.asp" --> en cada pagina

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

thanks!
__________________
" Recuerda , estas donde debes estar ..."

Última edición por Gaby_Corr; 30/05/2007 a las 14:38
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 11:24.