Foros del Web » Programando para Internet » Jquery »

haciendo un menu con jquery

Estas en el tema de haciendo un menu con jquery en el foro de Jquery en Foros del Web. Hola! Todas las páginas llaman al header donde tengo 2 menus, uno principal y un submenu que cambia en funcion del principal. Pretendo que al ...
  #1 (permalink)  
Antiguo 30/08/2012, 11:08
 
Fecha de Ingreso: marzo-2005
Mensajes: 10
Antigüedad: 19 años, 2 meses
Puntos: 0
Mensaje haciendo un menu con jquery

Hola!

Todas las páginas llaman al header donde tengo 2 menus, uno principal y un submenu que cambia en funcion del principal.

Pretendo que al entrar en maderas, plasticos o metales se me abra la pagina con el submenú correspondiente, y al entrar en (ej.) melanina se me abra la página /melanina y ademas añadir una clase a melanina y otra clase diferente a madera (para resaltar los 2 elementos activos del menu). Os pongo el código



Código HTML:
<div class="menuprincipal">
 <ul>
  <li><a href="/maderas/">maderas</a></li>
  <li><a href="/plasticos/">plasticos</a></li>
  <li><a href="/metales/">metales</a></li>
 </ul>
</div>

<div class="menumaderas">
 <ul>
  <li><a href="/aglomerado/">aglomerado</a></li>
  <li><a href="/contrachapado/">contrachapado</a></li>
  <li><a href="/melanina/">melanina</a></li>
 </ul>
</div>
<div class="menuplasticos">
 <ul>
  <li><a href="/poliestileno/">poliestileno</a></li>
  <li><a href="/pvc/">pvc</a></li>
 </ul>
</div>
<div class="menumetales">
 <ul>
  <li><a href="/aluminio/">aluminio</a></li>
  <li><a href="/acero/">acero</a></li>
  <li><a href="/hierro/">hierro</a></li>
 </ul>
</div> 
y el jquery:

Código:
<script>
$(document).ready(function(){
	var url = window.location.pathname;
	$('.menuprincipal ul li a[href="'+url+'"]').addClass('activa');
})
</script>
Por ahora consigo que añada la clase .activa a maderas, plasticos o metales. Pero no se como hacerlo para añadir una clase al menu y otra diferente al alemento del submenu. Ademas no se si veis viable hacerlo con un solo header (¿como muestro el div del submenú correspondiente en cada caso?) o tendría que hacer uno diferente para cada elemento del menu principal.

Muchas gracias!!
  #2 (permalink)  
Antiguo 30/08/2012, 11:19
Avatar de YYs86  
Fecha de Ingreso: abril-2012
Ubicación: Salamanca
Mensajes: 136
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: haciendo un menu con jquery

easy and fast ;D:

Asignale a cada btn del menu pp un id, ejemplo:

Código HTML:
Ver original
  1. <li><a href="/maderas/" id="maderas">maderas</a></li>

Ahora utiliza esa id para cambiar la clase de tu div:

Código Javascript:
Ver original
  1. $('.menuprincipal li').mouseover(function(){
  2.  
  3. var id = $(this).find('a').attr('id');
  4.  
  5. $('.menu'+id).addClass('tunuevaclase');
  6.  
  7. });
  8.  
  9. $('.menuprincipal li').mouseleave(function(){
  10.  
  11. var id = $(this).find('a').attr('id');
  12.  
  13. $('.menu'+id).removeClass('tunuevaclase');
  14.  
  15. });
__________________
Web developer:

http://xtremgaming.es
http://leaderleague.com

Última edición por YYs86; 30/08/2012 a las 11:21 Razón: Corrección

Etiquetas: funcion, haciendo
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 10:43.