ayuda, por favor, dejar seleccionada una opcion del menu

[pitufina_bea]

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.

[daPhyre]

Hasta donde se, eso solo se puede hacer con una clase que tenga las misma propiedades que el focus/active. Suerte

[c0lo]

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

[pitufina_bea]

ok, lo probaré pero hay alguna forma con

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

algo asi ahi????

sería mas sencillo y optimo.

[Darwinformatico]

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> 

[pitufina_bea]

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.

[pitufina_bea]

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%";

[pitufina_bea]

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.

[daPhyre]

¿Estás usando de forma correcta las pseudo.clases a:focus y a:active?

[Mikmoro]

No, efectivamente está usando sólo active:

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

[daPhyre]

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

[Mikmoro]

Iniciado por daPhyre

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.

[daPhyre]

Iniciado por Mikmoro

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

[Mikmoro]

No, este comentario está bien:

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:

(Aunque al parece IE interpreta estos dos al revés

IE interpreta active como si fuera focus, y focus no lo interpreta en asboluto.

[daPhyre]

Iniciado por Mikmoro

IE interpreta active como si fuera focus, y focus no lo interpreta en asboluto.

A esto mismo me refería...

[pitufina_bea]

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.

[pitufina_bea]

ya lo solucione, gracias chicos.