haciendo un menu con jquery

[elann]

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!!

[YYs86]

easy and fast ;D:

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

Código HTML:

<li><a href="/maderas/" id="maderas">maderas</a></li>
 

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

Código Javascript:

$('.menuprincipal li').mouseover(function(){
 
var id = $(this).find('a').attr('id');
 
$('.menu'+id).addClass('tunuevaclase');
 
});
 
$('.menuprincipal li').mouseleave(function(){
 
var id = $(this).find('a').attr('id');
 
$('.menu'+id).removeClass('tunuevaclase');
 
});