Ayuda con barra de menú

#1 (**permalink**) 03/02/2011, 14:53

Hola que tal estais compañeros,espero que me puedan echar un cable.

Necesito que cuando un usuario haga click sobre un elemento del menú y éste le diriga a su página correspondiente,éste elemento se quede marcado en otro color diferente de los demas elementos del menú.

Cuando seleccione otro elemento diferente suceda exactamente lo mismo y asi sucesivamente.Para asi saber en todo momento en que parte del menú nos encontramos durante la navegación.

No se si me he explicado bien

Aqui va el código:

<body id="page2">
<div id="apDiv1">
<ul id="css3menu">
<li class="topitem" class="act"><a href="#" title="Inicio">Inicio</a></li>
<li class="topitem"><a href="#" title="Servicio a domicilio">Servicio a domicilio</a></li>
<li class="topitem"><a href="#" title="Mantenimiento">Mantenimiento</a></li>
<li class="topitem"><a href="#" title="Asistencia online">Asistencia online</a></li>
<li class="topitem"><a href="#" title="Desarollo">Desarollo</a></li>
<li class="topitem"><a href="#" title="Contacto">Contacto</a></li>
</ul>

Y una imágen para hacernos la idea:

Gracias y un saludo!

gVenom · #2 (**permalink**) 03/02/2011, 15:05

Eso debes hacerlo con css, con la opcion de links a:visited
asi defines el estilo de los links visitados

Cita:

a:visited { text-decoration: line-through; }

eso por ejemplo. No se si cargas color a los div o una imagen gradient. Tu veras la opcion que le corresponde

#3 (**permalink**) 03/02/2011, 15:35

Los cargo a los div mediante archivo externo css,he visitado tu página y tienes el menú igual como lo quiero yo

alguna ayudita o tutorial como poner lo de link en css,y no seria el link R: activa? según tengo entendido es para enlaces activos y seria lo que quiero..nose :S

gVenom · #4 (**permalink**) 03/02/2011, 15:51

ok mira, imagino que ya tienes la imagen que quieres ponerle al menu cuando lo visiten, lo unico que hay que hacer mediante css (es indiferente si es hoja de estylo aparte o esta en la misma, aunque recomiendo la primera) es decirle al link que cuando lo visiten, cargue una imagen de fondo en el div o el li que lo contiene

algo asi

Código HTML:

a:visited { padding-right: 12px; background: url(visitedLink.gif) no-repeat 100% 50%; }

en el caso de mi menu, simplemente va que cuando este activo, cambie el color de fondo del <li>

#5 (**permalink**) 03/02/2011, 16:03

puf te he liado jajaja realmente no es la imágen lo que cambia sino,como en tu página el color

mira el css adjunto al menú:

Código:

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 6px;}
ul#css3menu ul>li{
	margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:left;}
ul#css3menu li:hover>a{
	background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
	width:16px;height:16px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu li.topitem>a{
	background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
	background-color:#7dfa00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}

gVenom · #6 (**permalink**) 03/02/2011, 16:13

q profundo :S

#7 (**permalink**) 03/02/2011, 16:47

sigo sin resolver mi duda :(

gVenom · #8 (**permalink**) 03/02/2011, 17:02

Código HTML:

#menu ul.li.normal:hover{
background: #363636; /*background of menu items (default state)*/
border-top: 1px solid #2A2A2A;
color:#fff;
}

#menu ul.li.activo:hover{
background: #363636; /*background del menu activo */
border-top: 1px solid #2A2A2A;
color:#fff;
}

y cuando vas al codigo html

pagina index

Código HTML:

<ul>
<li class="activo"><a href="#">index.html</a>
<li ><a href="#">pag2.html</a>
<li ><a href="#">pag3.html</a>
</ul>

pagina 2

Código HTML:

<ul>
<li><a href="#">index.html</a>
<li class="activo" ><a href="#">pag2.html</a>
<li ><a href="#">pag3.html</a>
</ul>

#9 (**permalink**) 03/02/2011, 17:18

Muchas gracias por tu paciencia y ayuda :)

Un saludo