Foros del Web » Creando para Internet » CSS »

Ayuda con menu

Estas en el tema de Ayuda con menu en el foro de CSS en Foros del Web. Hola [email protected]: Necesito de su ayuda, en esta ocasion con mi menu, que gracias a los cambios que le realice ya no me funciona como ...
  #1 (permalink)  
Antiguo 01/10/2010, 10:43
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Pregunta Ayuda con menu

Hola [email protected]:

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:
#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 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> 
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> 
Alguna otra forma?????

Gracias...
  #2 (permalink)  
Antiguo 01/10/2010, 10:58
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Ayuda con menu

Hola,

Eso se hace con Javascript. Pregunta en ese foro, ahí podrán ayudare mejor.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 01/10/2010, 11:00
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Ayuda con menu

si eso pense pero sigo buscando y he hecho una modificacion que parece a solucionado mi problema aunque no del todo:

en lugar de hacer una clase selected puse la subclase :active

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

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

El detalle ahora que tengo es que mi opcion de home no agarra la propiedad no se porque...
  #4 (permalink)  
Antiguo 01/10/2010, 11:07
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 11 meses
Puntos: 181
Respuesta: Ayuda con menu

:active, no es permanente. Al momento que des un clic en otro lugar de la pagina, selecciones un texto, clic derecho, tab, etc... Ya no funcionara. La mejor forma de hacerlo es con Javascript
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 01/10/2010, 11:22
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Ayuda con menu

mmm ok
preguntare por javascript gracias

Etiquetas: Ninguno
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 12:44.