Foros del Web » Creando para Internet » HTML »

Ayuda con barra de menú

Estas en el tema de Ayuda con barra de menú en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/02/2011, 14:53
armandas
Invitado
 
Mensajes: n/a
Puntos:
Exclamación Ayuda con barra de menú

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!
  #2 (permalink)  
Antiguo 03/02/2011, 15:05
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda con barra de menú

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
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 03/02/2011, 15:35
armandas
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ayuda con barra de menú

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

Última edición por armandas; 03/02/2011 a las 15:46
  #4 (permalink)  
Antiguo 03/02/2011, 15:51
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda con barra de menú

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>
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 03/02/2011, 16:03
armandas
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ayuda con barra de menú

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)}
  #6 (permalink)  
Antiguo 03/02/2011, 16:13
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda con barra de menú

q profundo :S
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 03/02/2011, 16:47
armandas
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ayuda con barra de menú

sigo sin resolver mi duda :(
  #8 (permalink)  
Antiguo 03/02/2011, 17:02
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Ayuda con barra de menú

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> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #9 (permalink)  
Antiguo 03/02/2011, 17:18
armandas
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ayuda con barra de menú

Muchas gracias por tu paciencia y ayuda :)

Un saludo

Etiquetas: barra
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 17:39.