Nascondere i menu di troppo con Jquery
Sto lavorando alla sistemazione del sito di un cliente, e tra le varie richieste c'e' quella di poter associare ad ogni pagina “contenitrice” un menu di secondo livello che porti a delle sottopagine, ma nel visualizzare una qualsiasi di queste sottopagine lo spazio dedicato al secondo livello deve mostrare solo i link alle altre sottopagine della stessa “contenitrice”, nientaltro, compreso il link alla pagina contenitrice. Senza scomodare moduli e hook vari, bastano poche righe di jquery.
Prima di vedere il codice javascript ricordiamo come drupal crea in automatico i menu:
* crea un tag <ul> con classe “menu”
* all'interno di questo <ul> crea tanti tag <li> quanti sono i menu “padri” definiti
* il primo sottocampo di ogni tag <li> è un tag <a> che linka ai vari nodi “padri”
* dopo ogni tag <a> inserisce un <ul> che contiene i figli di ogni singolo padre
* al tag <li> del nodo padre della pagina attualmente visibile aggiunge la classe “active-trail”, oltre a varie altre classi che al momento non ci interessano.
Tramite questa struttura possiamo creare il nostro semplice codice javascript:
* prendiamo tutti i tag <li> del tag <ul>
* per ogni tag <li> trovato
* controlliamo se non ha la classe “active-trail”
* se non è presente allora lo dobbiamo nascondere
* altrimenti dobbiano nascondere solo il tag <a> al suo interno
Tutto questo si traduce nel semplice codice Jquery:
$(document).ready(function() {
$('div.sidebar > ul.menu > li ').each(function() {
if (!$(this).hasClass('active-trail')) {$(this).css('display','none')}
else { $(this).children('a').css('display','none'); }
});
});
“div.sidebar” è il div (con classe “sidebar”) che contiene la regione in cui ho inserito il menu di secondo livello.
Trackback URL for this post:
- Add new comment
- 1507 reads
-





