Ayuda con menu

catpaw · #1 (**permalink**) 01/10/2010, 10:27

Hola forer@s:

Necesito de su ayuda, en esta ocasion con mi menu, que gracias a los cambios que le realice ya no me funciona como se espera.
Les explico: Anteriormente mi menu mandaba a llamar paginas (ahora manda a llamar div's cosa que hago mediante ajax), cada pagina que
mandaba a llamar tenia en su link la clase selected (css) por lo cual cada vez q estaba en la pestaña seleccionada esta era de un color
diferente a las que estan "inactivas" esto lo hago con una imagen de 84px de alto que trae una mitad de un color y la otra de otro,
y a la hora de hacer la seleccion esta se situa en la mitad para abajo y asi...

El problema es que como ahora mando a llamar div's mi metodo de poner a cada pagina la clase selected ya no funciona ya que el div q traigo
lo coloco dentro de otro y digamos que mi menu ya no tiene forma de saber que opcion se ha seleccionado y siempre esta "seleccionado el home"
mi codigo de mi menu css:

Código:

#menu_principal_ext{

}

#menu_principal{/*menu1*/
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	height: 31px;
	border-left: solid #01814E 1px; 
	border-right: solid #01814E 1px;
	background: #FFFFFF; /*E8E8E8;*/
	line-height: 14pt;
	border-bottom: 1px solid #01814E;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

#menu_principal ul{
	margin:0;
	padding:3px 10px 0 10px;
	list-style:none;
}
  
#menu_principal li{
	display:inline;
	margin:0;
	padding:0;
}
  
#menu_principal a{
	float:left;
	background:url("../images_menu/orilla.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
}
  
#menu_principal a span{
	display:block;
	background:url("../images_menu/cuadro.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color: #01603a; /*#F79C12 letras menu verde fuerte*/
}

#menu_principal a:hover{
	background-position:0% -42px;
}

#menu_principal a:hover span{
	color:#FFF;
	background-position:100% -42px;
}

#menu_principal a.selected{
	background-position:0% -42px;
}

#menu_principal a.selected span{
	color:#FFF;
	background-position:100% -42px;
}

Y aca mi codigo html (solo la parte del menu):

Código HTML:

<body onload="loadurl('../xxx/xxx/home.php','trabajo')">

<div id="menu_principal_ext">
	<div id="menu_principal">
		<ul>
			<li><a href="index.php" class="selected"><span>Home</span></a></li>
			<li><a href="javascript:loadurl('../xxx/xxx/xxx1.php', 'trabajo')" ><span>Opcion 1</span></a></li>
			<li><a href="javascript:loadurl('../xxx/xxx/xxx2.php', 'trabajo')" ><span>Opcion 2</span></a></li>
			<li><a href="javascript:loadurl('../xxx/xxx/xxx3.php', 'trabajo')" ><span>Opcion 3</span></a></li>
			<li><a href="javascript:loadurl('../xxx/xxx/xxx4.php', 'trabajo')" ><span>Opcion 4</span></a></li>
			<li><a href="javascript:loadurl('../xxx/xxx/xxx5.php', 'trabajo')" ><span>Opcion 5</span></a></li>
		</ul>
	</div>
</div>

Habra alguna posibilidad de que cada vees q mando a llamar un div se asigne algo asi como una variable al menu y se seleccione la opcion correspondiente??
Por ejemplo si selecciono la opcion 2, se haga algo asi:

Código HTML:

<li><a href="index.php" class="$noselected"><span>Home</span></a></li>
<li><a href="javascript:loadurl('../xxx/xxx/xxx1.php', 'trabajo')" class="$selected" ><span>Opcion 1</span></a></li>

Pregunte en el foro de css y me mandaron para aca, la verdad no tengo la minima idea de como...

Alguna idea?????

Gracias...

catpaw · #2 (**permalink**) 01/10/2010, 11:21

Hice un poco la estructura de como debe funcionar, algo asi:

Código:

function opcion1(){
	if(opcion1==seleccionada){
		var opcion1= "selected"
		var opcion2= ""
		var opcion3= ""
		var opcion4= ""
		var opcion5= ""
		var opcion6= ""
	} 
}

function opcion2(){
	if(opcion2==seleccionada){
		var opcion1= ""
		var opcion2= "selected"
		var opcion3= ""
		var opcion4= ""
		var opcion5= ""
		var opcion6= ""
	} 
}

function opcion3(){
	if(opcion3==seleccionada){
		var opcion1= ""
		var opcion2= ""
		var opcion3= "selected"
		var opcion4= ""
		var opcion5= ""
		var opcion6= ""
	} 
}

function opcion4(){
	if(opcion4==seleccionada){
		var opcion1= ""
		var opcion2= ""
		var opcion3= ""
		var opcion4= "selected"
		var opcion5= ""
		var opcion6= ""
	} 
}

function opcion5(){
	if(opcion5==seleccionada){
		var opcion1= ""
		var opcion2= ""
		var opcion3= ""
		var opcion4= ""
		var opcion5= "selected"
		var opcion6= ""
	} 
}

function opcion6(){
	if(opcion6==seleccionada){
		var opcion1= ""
		var opcion2= ""
		var opcion3= ""
		var opcion4= ""
		var opcion5= ""
		var opcion6= "selected"
	} 
}

Pero no tengo idea de que va en la condicion ya que no se si las etiquetas a se les pueda poner id o no se como distinguirlas

tambien como se otorgaria la clase al class, no se si por onclick o algo

Ayuda por favor...
Gracias...