Ver Mensaje Individual
  #10 (permalink)  
Antiguo 05/10/2010, 07:33
Avatar de catpaw
catpaw
 
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 14 años, 6 meses
Puntos: 23
Respuesta: menu como este!!!

Pues no jala, no se...
Tengo dos imagenes por q el "boton" de cada opcion del menu lo hago poniendo primero una orilla y con el span lo demas del relleno, estas son las imagenes con las que hago los botones:

la orilla:


el relleno:



Aca una imagen del menu (click para verla mas grande):



Este es todo mi estilo del menu:

Código:
#menu_principal_ext{

}

#menu_principal{
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	height: 31px;
	border-left: solid #01814E 1px; 
	border-right: solid #01814E 1px;
	background: #FFFFFF; 
	line-height: 14pt;
	border-bottom: 1px solid #01814E;
	font-family: Comic Sans MS, Arial, 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;
}

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

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

.selected{
	float:left;
	background:url("../images_menu/orilla.gif") no-repeat left top;
	background-position:0% -42px;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;		  
}
.selected_span{
	display:block;
	background:url("../images_menu/cuadro.gif") no-repeat right top;
	background-position:100% -42px;
	padding:5px 15px 4px 6px;
	color:#FFF;
}
El hover funciona bien, al pasar el raton por alguna opcion me cambia el color a verde, pero ya al darle click a alguno deberia quedarse de color verde, cosa q no ocurre...este script deberia funcionar no??

Código:
  $(document).ready(function() {
    $("#menu_principal li").click(function () {
			$("#menu_principal li").removeClass("selected");
			$("#menu_principal li").removeClass("selected_span");	
			$(this).addClass("selected");
			$(this).addClass("selected_span");
    });
  });
Espero me puedan seguir ayudando...Gracias