Foros del Web » Creando para Internet » HTML »

ayuda, por favor, dejar seleccionada una opcion del menu

Estas en el tema de ayuda, por favor, dejar seleccionada una opcion del menu en el foro de HTML en Foros del Web. hola, buenas, tengo una dudilla. estoy creando mi pagina con javascript,css,html y tengo un menu con varias opciones, entonces yo quiero que cuando se carge ...
  #1 (permalink)  
Antiguo 22/10/2008, 05:39
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
ayuda, por favor, dejar seleccionada una opcion del menu

hola, buenas, tengo una dudilla.

estoy creando mi pagina con javascript,css,html y tengo un menu con varias opciones, entonces yo quiero que cuando se carge la pagina por primera vez se vea seleccionada la primera opcion del menu. es decir, como si la hubieras pinchado.

el css que tengo es:

#capa_menu3 ul
{
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 45px;
}

#capa_menu3 ul li
{
display: inline;
}

#capa_menu3 ul li a:link, #capa_menu3 ul li a:visited
{
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}

#capa_menu3 ul li a:hover, #capa_menu3 ul li a:active
{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}

y en el html:

<div id="capa_menu3">
<ul>
<li><a href="#" onClick="menus('1');">Formato 1</a>
<li><a href="#" onClick="menus('2');">Formato 2</a>
<li><a href="#" onClick="menus('3');">Formato 3</a>
<li><a href="#" onClick="menus('4');">Formato 4</a>
<li><a href="#" onClick="menus('5');">Formato 5</a>
<li><a href="#" onClick="menus('6');">Formato 6</a>
</ul>
</div>

la imagen fondo_menu es una imagen con dos rectangulos, cada uno de un color.

a ver si alguien me podria ayudar.

gracias.
  #2 (permalink)  
Antiguo 22/10/2008, 11:02
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Hasta donde se, eso solo se puede hacer con una clase que tenga las misma propiedades que el focus/active. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 22/10/2008, 12:20
Avatar de c0lo  
Fecha de Ingreso: julio-2005
Ubicación: Buenos Aires
Mensajes: 281
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Te dejo un enlace.

http://www.forosdelweb.com/f53/como-hace-active-442324/

La técnica que comparte webosiris en este me parece la más interesante.

Saludos!

PD.: id al body; que buen invento... va más alla del menu :P
__________________
Nuestro amo juega al esclavo // de esta tierra que es una herida
que se abre todos los días // a pura muerte, a todo gramo.
Violencia es mentir.
  #4 (permalink)  
Antiguo 23/10/2008, 03:41
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

ok, lo probaré pero hay alguna forma con

document.getElementById(id) (y lo que sea)

algo asi ahi????

sería mas sencillo y optimo.
  #5 (permalink)  
Antiguo 23/10/2008, 13:29
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Hola un saludo, como lo veo te estas complicando mucho mira

Creas el menu y una clase llamada activado la cual pondrás al enlace del menu que indique la sección en la que te encuentras en ese momento.

y en html la llamas en el enlace.... un ejemplo

Código HTML:
 <div id="menu">
		<ul>
			<li><a href="#" class="activado">Inicio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#l">Contacto</a></li>
			<li><a href="#">Staff</a></li>
			<li><a href="#">Login</a></li>
		</ul>
	</div> 
  #6 (permalink)  
Antiguo 27/10/2008, 04:06
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

ya pero es que me piden que lo haga con

document.getElementById(id) (y lo que sea)

y no se, por eso era, si no hay mas remedio, lo hago como me decis. pero si tengo la posibilidad de hacerlo como me lo piden pues de cine.
  #7 (permalink)  
Antiguo 27/10/2008, 04:46
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

he encontrado esto, pero no se como colocarlo ni donde para la palabra en cuestion.




document.getElementById(id).style.position = "absolute";
document.getElementById(id).style.top = "0";
document.getElementById(id).style.left = "0";

document.getElementById(id).style.height = "100%";
document.getElementById(id).style.width = "100%";
  #8 (permalink)  
Antiguo 28/10/2008, 05:49
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

he probado lo que me decis, pero sigue sin funcionar, y encima me acabo de dar cuenta que en el mozilla no me funciona y cuando pulsas una opción no se queda el fondo gris, sin embargo con explorer si.
  #9 (permalink)  
Antiguo 28/10/2008, 10:45
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

¿Estás usando de forma correcta las pseudo.clases a:focus y a:active?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 28/10/2008, 11:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

No, efectivamente está usando sólo active:

Cita:
#capa_menu3 ul li a:hover, #capa_menu3 ul li a:active
{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 28/10/2008, 11:15
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Para tal caso, es necesario que uses Hover, Focus y Active.

La referencia que encontré está aquí: http://paulryanbohman.com/web/css/hover_focus_active (En inglés).

en resumen, Hover es cuando el Mouse está arriba, Focus cuando el link tiene el enfoque y Active cuando está siendo presionado (Aunque al parece IE interpreta estos dos al revés... Para variar ).

Recuerda siempre seguir el orden LVHFA (Link, Visited, Hover, Focus, Active). Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 28/10/2008, 11:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Cita:
Iniciado por daPhyre Ver Mensaje
en resumen, Hover es cuando el Mouse está arriba, Focus cuando el link tiene el enfoque y Active cuando está siendo presionado (Aunque al parece IE interpreta estos dos al revés... Para variar ).
Una presición: únicamente IE interpreta active como focus, por eso es necesario usar ambos para conseguir el efecto. Focus no lo interpreta en absoluto.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 28/10/2008, 11:22
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Cita:
Iniciado por Mikmoro Ver Mensaje
nicamente IE interpreta active como focus [...] Focus no lo interpreta en absoluto.
Mandaré un mensaje al webmaster de la página que dijo lo que dije para que lo corrija, perdonen
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Última edición por daPhyre; 28/10/2008 a las 12:01
  #14 (permalink)  
Antiguo 28/10/2008, 11:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

No, este comentario está bien:

Cita:
en resumen, Hover es cuando el Mouse está arriba, Focus cuando el link tiene el enfoque y Active cuando está siendo presionado
Yo precisaba el paréntesis:

Cita:
(Aunque al parece IE interpreta estos dos al revés
IE interpreta active como si fuera focus, y focus no lo interpreta en asboluto.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 28/10/2008, 12:02
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

Cita:
Iniciado por Mikmoro Ver Mensaje
IE interpreta active como si fuera focus, y focus no lo interpreta en asboluto.
A esto mismo me refería...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #16 (permalink)  
Antiguo 29/10/2008, 04:25
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

entiendo lo que me decis, lo probare, pero he investigado y he sacado esto:



if (indice <=5)
{
document.getElementById("format"+indice).style.bac kgroundPosition="0 -30px";
}


pero lo que ahora me surge es que cuando pincho otra opcion se me queda la de antes pulsada, y tendria que cada vez que pinches las demas se pusieran con el backgroundPosition= "0 0px";
pero no se hacerlo.
  #17 (permalink)  
Antiguo 30/10/2008, 06:24
 
Fecha de Ingreso: octubre-2008
Mensajes: 45
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: ayuda, por favor, dejar seleccionada una opcion del menu

ya lo solucione, gracias chicos.
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 08:39.