Ayuda con menu 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 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 paner 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:
Y aca mi codigo html (solo la parte del menu):#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;
}
Código HTML:
<body nload="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>
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>
Gracias...
