jQuery

Menu verticale jQuery con effetto fisarmonica

menu-verticale.jpg

UPDATE: Ho pubblicato un secondo tutorial in cui ho riportato le modifiche richieste nei feedback, come rendere la voce del menu principale anch’essa cliccabile e poter rimanere aperto il sotto menu corrispondente alla pagina visitata.

In questo tutoriale faremo un semplice menu verticale con jQuery ma che cattura l’attenzione del navigatore con l’aiuto di CSS e del plugin Easing per l’effetto a fisarmonica.

Documento HTML

Come potete vedere in seguito dalla demo, il menu è diviso in quattro voci, ciascuna definita da un elemento LI posizionati all’interno dell’elenco principale UL:

Ogni voce del menu contiene un altro elenco UL, formato dalla voce del menu principale (li.title) e da un altro elenco UL che rappresenta il sotto menu (li.sub-menu).
All’interno dell’elemento li.title abbiamo un ancora a cui poi associamo un gestore di eventi jQuery che fa aprire il sotto menu corrispondente: il menu a discesa è nascosto di default tramite la proprietà css display: none.

Foglio di stile CSS

Con uno stile accattivante, anche la più semplice idea può fare una grande differenza nell’attenzione del visitatore.
E’ importante fare particolare attenzione che il codice CSS sia valido e che funzioni bene in tutti i browser:

Effetti con jQuery

In primo luogo abbiamo bisogno di includere alcuni script nel documento HTML (questo codice va messo all’interno della sezione HEAD):

Per prima cosa bisogna includere la libreria jQuery (in questo caso dai server di Google), poi il plugin Easing e infine il nostro file di script.

Come potete notare dalla demo, l’effetto che si ha nell’aprire un sotto menu è simile ad un rimbalzo. Questo risultato è ottenuto con l’aiuto del plugin Easing per jQuery: esso prevede una serie di effetti interessanti.

Ecco il codice del nostro file di script:

Per prima cosa bisogna impostare l’effetto da utilizzare (easeOutBounce), e quindi associare una funzione da compiere per l’evento click sul link in li.title: si ottiene il corrispondente sotto menu (linea ) e lo si mostra (linea ), nascondendo tutti gli altri (linea ).

Il metodo slideToggle di jQuery controlla se l’elemento è già visibile sulla pagina, e decide se mostrarlo o nasconderlo: in questo modo, quando si fa click su una sezione del menu già aperta, essa viene semplicemente chiusa.
Dopo questo, usiamo e.preventDefault() per impedire al browser di seguire il collegamento (il comportamento normale per avere cliccato su un link).

Demo Download

You might also like

  • DVD

    Ottimo! solo una cosa.. se volessi implementare a:active
    per il submenu?

    $(document).ready(function() {
    $(“.sub-menu a”).click(function() {
    $(“.sub-menu a”).removeClass(“selected”);
    $(this).addClass(“selected”);
    });
    });

    Grazie!

    20 aprile 2010
  • @ DVD:
    scusami ma con $(this) ti stai riferendo alla voce cliccata, dunque quello che fa ciò che hai scritto è rimuovere la classe selected e poi ri-aggiungerla.
    Non ho capito cosa cercavi di fare

    20 aprile 2010
  • DVD

    @ MaiNick:
    Praticamente voglio assegnare una classe dei css diversa alla voce del menu selezionata. Per esempio se clicco su Articolo 1, si deve attivare per la voce selezionata una classe specifica che ho definito che lo evidenzia fino a che non seleziono un altra voce.
    Grazie!

    20 aprile 2010
    • @ DVD:
      forse ho capito. Inserisci nel file di script, dopo la dichiarazione dell’evento click sui link principali:
      $('li.sub-menu a').click(function(){
      // rimuovo la classe css su ogni possibile link voce sotto-menu
      $('li.sub-menu a').each(function(){
      $(this).removeClass("selected");
      });
      // aggiungo la classe css al link cliccato
      $(this).addClass("selected");
      // se non deve continuare nella funzione default del link
      return false;
      });

      spero di aver capito e risolto il tuo problema.

      20 aprile 2010
  • DVD

    6 un grande! Grazie mille!!

    20 aprile 2010
  • Dino

    Ciao! Sarebbe grandioso se esistesse anche una versione “orizzontale” di questo fantastico menù. Mi spiego…
    invece di avere la progressione così
    —-
    |
    —-
    |
    —-

    e via dicendo, sarebbe possibile averla così:

    |—-|–|—–|

    o è troppo complicato?
    Grazie! 🙂

    20 aprile 2010
  • Pino

    Ciao e complimenti! Senti, come posso fare per mantenere il sotto menu aperto una volta cliccata una voce.

    mi spiego meglio:
    clicco una una delle voci principali -> si apre la tendina -> clicco su una voce di sotto menu -> vengo indirizzato alla pagina. Ecco, vorrei che nella nuova pagina il sotto menu selezionato in precedenza rimanesse aperto.

    grazie

    20 aprile 2010
  • Ciao e grazie! Puoi inviarti un valore tramite l’array globale $_GET, oppure tramite uno script in JavaScript controllare l’indirizzo della pagina corrente. Tutti e due i casi imposti una classe CSS, ad esempio open, che ti rimane aperto il sotto-menu desiderato.

    20 aprile 2010
  • pino

    Ciao e grazie per la solerte risposta. Il problema è che il menu si genera dinamicamente attraverso un ciclo while, se invio tramite get un valore x tutti i link del menu avranno quel valore e quindi tutte le tendine si aprirebbero.

    Spero di essermi spiegato!

    Hai qualche idea?

    grazie
    @ MaiNick:

    20 aprile 2010
    • @ pino: meglio così, io per valore intendevo la voce del menù che devi visualizzare: quando generi il menu con il while fai un controllo se la voce da visualizzare è uguale a quella inviata allora stampa la classe open

      20 aprile 2010
  • pino

    Hai ragione MaiN, mi ero scioccamente impuntato sulle sottocategorie. Ora funziona, ti ringrazio.

    20 aprile 2010
  • pino

    MaiN, come ti dicevo, funziona. C’è solo un piccolo problema:

    una volta giunto sulla pagina di destinazione, il sottomenu rimane aperto, appunto. Ma se seleziono un’altra voce di menu, chiaramente il sottomenu precedente continua a rimanere aperto a causa della classe open cui ora è soggetta.

    È possibile ri-associare la classe originaria a quel sottomenu quando si fa clic su una nuova voce di menu?

    20 aprile 2010
    • Se ho capito bene dici che se clikki una voce del menu principale, il sotto-menu che prima era aperto tramite la classe open non si chiude automaticamente.
      Allora puoi risolvere il problema inserendo nel codice del file dello script, prima della riga di codice $('.sub-menu').not(subMenu).slideUp('slow');, la seguente istruzione:
      $('.sub-menu').not(subMenu).removeClass('open');.
      Spero di aver capito il tuo problema e di averlo risolto.

      20 aprile 2010
  • pino

    Ciao MaiN. Esatto, il problema è proprio questo.

    La classe “open” rimane associata a quel che si porta dietro il nome della categoria principale.

    Il mio problema è quello di rimuovere la classe “open” e riattivare la classe d’origine “sub-menu”.

    Ho provato a inserire l’istruzione che dicevi ma, ahimè, non produce alcun effetto.

    20 aprile 2010
  • Scusami ma la classe open è sullo stesso elemento a cui è associata la classe sub-menu?

    20 aprile 2010
  • pino

    ho fatto un controllo di questo tipo:

    <?php
    if($open==$nome_cat) {
    $class = "open";
    echo "”;
    } else {
    echo “”;
    }
    ?>

    20 aprile 2010
    • Se scrivi il sotto-menu nel modo seguente, il codice JavaScript che ti ho scritto nei commenti precedenti, dovrebbe funzionare:

      <li class="sub-menu <?php echo ($open==$nome_cat) ? 'open' : ''"?>">
      <ul>
      <li><a href="#">Articolo 1</a></li>
      <li><a href="#">Articolo 2</a></li>
      </ul>
      </li>

      20 aprile 2010
  • pino

    scusa, il codice di prima non ha incluso le due opzioni .

    Ci riprovo:

    <?php
    if($open==$nome_cat) {
    $class = "open";
    echo "”;
    } else {
    echo “”;
    }
    ?>

    20 aprile 2010
  • pino

    di nuovo, provo così:

    nel primo echo ci sta

    e nel secondo

    else

    20 aprile 2010
  • pino

    Non funziona. Facendo come dici l’output html mi restituisce questo:

    li class=”sub-menu open”

    20 aprile 2010
    • Scusa ma tu prima dove la mettevi la classe open?

      20 aprile 2010
  • pino

    con un controllo if else, se variabile open corrisponde a variabile nome_cat allora stampo un “li” con class “open”, altrimenti stampo “li” con class “sub-menu”@ MaiNick:

    20 aprile 2010
    • Quindi se ho capito bene metti la classe open su li, dove ci sono i link alle pagine, all’interno della lista con la classe sub-menu.
      Se si al posto del codice javascript che ti ho scritto alcuni commenti prima $('.sub-menu').not(subMenu).removeClass('open'); sostituiscila con la seguente riga $('.sub-menu li').removeClass('open'); che non fa altro che togliere la classe open da tutte le voci li interne al lista con classe sub-menu.
      Se non funziona inviami un’e-mail risponde a quella che ti ho inviato in questo momento.

      20 aprile 2010
  • paolo

    MaiNick ha scritto:

    Ciao e grazie! Puoi inviarti un valore tramite l’array globale $_GET, oppure tramite uno script in JavaScript controllare l’indirizzo della pagina corrente. Tutti e due i casi imposti una classe CSS, ad esempio open, che ti rimane aperto il sotto-menu desiderato.

    so qual è la pagina.. ok! e come dico con i CSS che resti aperto??

    20 aprile 2010
  • Puoi fare come ho scritto in un commento precedente: scrivi il sotto-menu nel modo seguente

    <li class="sub-menu <?php echo ($_GET[‘open’]==$nome_cat) ? ‘open’ : ” ?>">
    <ul>
    <li><a href="#">Articolo 1</a></li>
    <li><a href="#">Articolo 2lt;/a></li>
    </ul>
    &/li>

    dove $nome_cat è il nome della categoria o voce lista con il quale fare il confronto con il valore inviato tramite $_GET['open'].

    20 aprile 2010
  • Iron

    Una domanda! (sono un neofita, quindi non lapidatemi 😀 ).

    Voglio che se JavaScript venga disattivato il menù possa apparire per intero, quindi aperto.
    Altrimenti, con JS attivato, chiuso.

    Grazie

    20 aprile 2010
  • @ Iron: benvenuto iron.
    Allora innanzitutto devi togliere la proprietà display:none di .sub-menu dal foglio di stile CSS, poi inserisci la seguente riga di codice javascript nel codice del file di script:
    $('.sub-menu').css("display","none");
    subito dopo
    $(document).ready(function(){

    20 aprile 2010
  • Fabio

    Ciao, complimenti per il blog.
    Io, purtroppo ho un problema non posso usare il codice php “> che tu hai indicato.
    Mi sarebbe utile capire come indicare tramite il CSS e il Javascript di lasciare aperto il sotto menu.
    Grazie per l’attenzione.

    20 aprile 2010
  • @ Fabio: ciao Fabio e grazie dei complimenti.
    Se vedi il commento sopra il tuo ho risolto il tuo problema solo con codice JavaScript e CSS.

    20 aprile 2010
  • Iron

    Grazie MaiNick per la risposta 😉

    Un ultimo quesito.
    Voglio dare un’effetto diverso dal Bounce.
    All’apertura del sub-menu infatti, vorrei dare un effetto di Fade al sub-menu stesso.
    Come posso fare?
    Grazie ancora

    20 aprile 2010
  • Fabio

    @MaiNick: Grazie sei stato velocissimo. Ma credo di essermi spiegato male: io ho lo stesso problema che aveva Pino, ma posso trovare una soluzione esclusivamente tramite Javascript e CSS.
    La tua soluzione può essere un punto di partenza ma devo trovare un modo per lasciare esploso solo il sottomenu inerente al link visitato.
    Grazie ancora

    20 aprile 2010
  • @ Iron: dirti la verità non mi piace molto, anche perché non si vedrebbe l’effetto, comunque se vuoi puoi sostituire nel file di script la seguente voce:
    subMenu.stop(false,true).slideToggle('slow');
    con la seguente
    subMenu.stop(false,true).fadeIn('slow');

    20 aprile 2010
  • Iron

    Era proprio l’effetto che volevo dare, grazie.
    Però una volta aperto un sub-menu, se ri-clicco sulla voce principale il sub-menu stesso non si richiude..
    Come potrei risolvere?
    Grazie 🙂

    20 aprile 2010
  • Fabio

    @MaiNick: secondo me ti sei pentito di questo post 😛 Ti stiamo rompendo proprio l’anima !!! 🙂

    20 aprile 2010
  • @ Fabio: come per Pino ti invii un valore tramite url http://www.esempio.it/articolo.html?catopen=jquery che poi prelevi tramite JavaScript in questo modo:
    var categoriaOpen = unescape(self.location.search.substr(1)).split("=");
    otterrai nella variabile categoriaOpen un array composto da due elementi categoriaOpen[0] il valore catopen e categoriaOpen[1] il valore del menu da lasciare aperto jquery.
    Puoi inserire questo codice JavaScript nel file di script dell’esempio e poi continuare con uno switch o un if per determinare il menu che dovrà avere la classe open spiegata nei commenti in risposta a Pino.

    20 aprile 2010
  • @ Iron: si infatti, perché prima c’era l’effetto slideToggle che provvedeva ad aprire o chiudere con effetto a tendina a seconda che si trovava nello stato inverso, mentre non esiste un effetto fade che provveda ad eseguire l’effetto inverso allo stato in cui si trova (aperto o chiuso) e deve provvedere tu tramite fadeIn e fadeOut, ma come è sviluppato il menu è un passaggio piuttosto difficile.
    Mi dispiace non averti dato una risposta migliore 🙁

    20 aprile 2010
  • Iron

    Iron ha scritto:

    Era proprio l’effetto che volevo dare, grazie.
    Però una volta aperto un sub-menu, se ri-clicco sulla voce principale il sub-menu stesso non si richiude..
    Come potrei risolvere?
    Grazie

    PS: dimenticavo! Con un fade anche in chiusura 😉

    20 aprile 2010
  • Iron

    Ah, letto ora 🙂
    grazie 1000 delle risposte.

    Ciao!

    20 aprile 2010
  • Fabio

    @MaiNick: Grazie 1000. Sei stato davvero gentilissimo!!!

    20 aprile 2010
  • aleandro

    Ciao MainNick, sono un niubbio con javascript e jquery, e sono di fronte ad un prob, che è l’attivazione del controllo activeX di IE (ho la versione 8)..
    ho visto che molti esempi e animazioni di Jquery funzionano senza questo prob, ma quando provo a creare una funzione,
    e lo testo su IE, mi parte il controllo activeX..
    mi è anche venuto un dubbio non è (come in Flash) che il controllo parte quando il file viene testato in locale??
    e se è cosi come si fà a vedere effettivamente se usando altre tecnologie javascript e ajax non parta quel controllo quando il sito è online?
    grazie..

    20 aprile 2010
  • @ aleandro: ciao e benvenuto. Si il problema che si attivi il controllo ActiveX su IE risulta solo in locale (verifica di sicurezza), mentre on-line non si verificherà.

    20 aprile 2010
  • aleandro

    @ MaiNick:
    grazie, mi ci sono sbattuto per diversi giorni..

    20 aprile 2010
  • Riccardo

    Ciao. E’ possibile che una voce non apra altre voci ma che sia un link diretto? Come si fa?

    20 aprile 2010
  • @ Riccardo: ciao e benvenuto. Allora puoi ricreare una voce del menu principale senza il sotto-menu .sub-menu e cambiare la classe .title in .title-link. Poi dai le stesse regole CSS che ha la classe .title anche alla nuova classe .title-link e ovviamente metti il link che deve seguire nell’attributo href della nuova voce di menu principale.
    Spero di essere stato chiaro, se hai problemi fammi sapere.

    20 aprile 2010
  • Riccardo

    Grazie mille, ce l’ho fatta.

    20 aprile 2010
  • Pino

    ciao Main, eccomi di nuovo 🙂

    Ho notato che il menu funziona bene su tutte le versioni di browser recenti: FF, safari, opera ecc. Mentre per l’amico IE funziona bene solo con la versione 8. Con IE6 e IE7 il menu funziona a scatti. Il movimento di chiusura e apertura della tendina non è fluido.

    È possibile fare qualcosa?

    grazie

    20 aprile 2010
    • Mi dispiace ma l’effetto dipende dalla libreria jQuery con plugin Easing. Prova ad aumentare la velocità dell’effetto e vedi se cambia qualcosa; al posto di slow utilizza il parametro fast.

      20 aprile 2010
  • Daniele Peri

    Ciao bellissimo menu, ma avrei la necessità che ogni li sia diverso, mi spiego. Ora nella demo ci sono 4 categorie e tutte hanno il colore rosso. Io vorrei che fossero tutti 4 di colore diversi come posso fare?

    Grazie

    20 aprile 2010
  • Daniele Peri

    Caio a tutti, bel menù complimenti! Volevo però sostituire al colore rosso delle immagini, e per ogni link associarne una diversa, come posso fare?

    Grazie

    20 aprile 2010
  • Daniele Peri

    Scusate per il doppio post di prima, avrei un altra domanda. Quando posiziono il mouse sopra al link cè un effetto rollover che fa diventare il colore un rosso acceso. Vorrei che l’effetto rollover rimanesse anche aver aperto il sub menu

    20 aprile 2010
  • thrasher

    Ciao e complimenti per li super menu 🙂
    veramente bello!
    volevo farti una domanda però,
    se io volessi fare in modo che al mio click su una voce del menu si aprisse un link e contemporaneamente si aprisse anche il sottomenu a fisarmonica? secondo te è fattibile?
    grazie anticipatamente,
    cordiali saluti

    20 aprile 2010
  • […] Link diretto […]

    20 aprile 2010
  • joe

    Ciao e anche da parte mia i complimenti per questo script.
    Anche se lo leggo dopo svariato tempo lo sto provando solo adesso.
    E volevo chiederti aiuto a proposito di:
    come detto nei posto precedenti (ma non ci ho capito nada 🙂 )
    sarebbe interessante avere i menu che rimango aperti una volta cliccato la voce e solo se si cambia categoria si chiude la precedente e si apre la nuovo.
    Un po come fanno gli accordion…
    2. prob.
    come diceva trasher nell ultimo posto avrei anche io bisogno che le categorie siano linkabili ma che contemporaneamente i menù rimanessero aperti

    Praticamente un insieme delle due cose richieste

    Penso che se tu riuscissi ad aggiungere nel tuo tutorial anche queste due cose faresti bingo….

    Grazie per la tua disponibilità

    Ciao

    20 aprile 2010
  • […] riguardo ad alcune richieste di modifiche, ho deciso di sviluppare una seconda versione del menu verticale con effetto a fisarmonica sperando di soddisfare la maggior parte degli […]

    20 aprile 2010
  • Pierhagi

    Ciao

    sto modificando il menù per integrarlo con asp e renderlo dinamico.

    Nel menù faccio visualizzare le SuperCategorie nei titoli e le Categorie all’interno del sub-menu.

    Il mio problema è che inserendo un ciclo dentro l’altro riesco a visualizzare le Categorie solo del primo pulsante e gli altri non mi si aprono! Qlc sa il xchè? Il codice è questo:


    <a href="categoria_accordion.asp?id_super_categoria=”>

    <a href="anag_gallery_dettaglio.asp?id_categoria=”>

    20 aprile 2010
  • Pierhagi

    scusate il codice che volevo visualizzare è questo:


    <a href="categoria_accordion.asp?id_super_categoria=”>

    <a href="anag_gallery_dettaglio.asp?id_categoria=”>

    20 aprile 2010
    • Ciao Pierhagi, forse il tuo codice non è completo prova a scriverlo tra tag <code> — codice — </code> oppure scrivi i caratteri speciali come entità HTML.

      20 aprile 2010
  • Pierhagi

    @ MaiNick:
    Ciao e grazie di avermi risposto!

    Ho provato ad inserire ma non ho avuto esito positivo.

    Qlc mi ha suggerito di inserire nel un id per recuperare l’id_super_categoria dell’url perchè l’effetto parte sempre con la stessa funzione Javascript però bisogna dirgli a quale elemento far riferimento. Mettendo un’id che corrisponde poi all’id della categoria in modo che quando si clicca viene recuperato la querystring che contiene l’id e si dice a javascript esattamente qual’è l’elemento nel quale fare l’effetto.

    Qlc sa spiegarmelo?

    20 aprile 2010
    • @Pierhagi scusami ma non ho capito bene il tuo problema. Nei messaggi precedenti ho compreso che hai un problema nel codice di visualizzazione dei sotto menu, mentre ora ho capito che tu vorresti aprire il sotto menu corrispondente alla pagina visitata; se quest’ultimo è il tuo bisogno puoi vedere l’ultimo articolo che ho pubblicato in cui c’è una versione aggiornata di questo tutorial modificato per risolvere tale problema.
      Fammi sapere.

      20 aprile 2010
  • Pierhagi

    Ciao si c’erano degli errori di base nel codice che ti ho dato!

    Per capirci descrivo cosa vorrei che facesse il menù.

    Ad es. visualizzando la home del sito clicco su un pulsante, che x me sono le SuperCategorie, il menù si espande visualizzandomi le Categorie appartenti al pulsante cliccato rimanendo sempre nella pagina home!
    Se clicco in una Categorie, cioè in una voce nel sub-menu mi deve visualizzare la pagina con la gallery di quella categoria!

    Il mio problema è che queste azioni funzionano solo con il primo pulsante!
    Se clicco su un pulsante qualsiasi che non sia il primo non ottengo lo stesso effetto xchè questi pulsanti non ricevono il valore id x poter visualizzare l’elenco delle categorie.

    Credo che il codice js non faccia passare questi valori!

    20 aprile 2010
    • @Pierhagi scusami se ho capito bene vuoi che ci siano altri livelli di sotto menu SuperCategoria->Categoria->SottoCategoria. Allora bisogna modificare del tutto lo script.
      Fammi sapere e se possibile puoi postarmi il link al tuo esempio per rendermi conto meglio di quello che vuoi fare.

      20 aprile 2010
  • Pierhagi

    Ciao no non voglio una sottocategoria, guarda qui:

    http://www.fulminanti.it/categoria_accordion2.asp?id_super_categoria=29

    se tu clicchi sul primo pulsante e cioè Abbigliamento ti si apre il menù con le categorie… e così è corretto!…ma se poi decidi di cliccare su un altro pulsante non si visualizzano più le categorie!

    Ti dico già che il pulsante corretto è il “57 – Cappellini2” xchè contiene il valore dell’id_super_categoria=57 che dovrà essere utilizzato per estrarre le categorie della supercategoria Cappellini.

    20 aprile 2010
  • Paolo

    Ciao, ho cercato tra i commenti precedenti ma non ho trovato risposta.
    Non riesco a visualizzarlo in Safari, sai dirmi come mai?
    Grazie

    20 aprile 2010
    • Ciao @Paolo, non so perché non riesci a visualizzarlo su Safari, lo script funziona su tutti i browser puoi visualizzare la demo per verificarlo.

      20 aprile 2010
      • Paolo

        Si in effetti la tua demo si vede perfettamente su Safari.
        Eppure ho solo cambiato il colore di sfondo degli item…
        veramente strano…

        20 aprile 2010
        • Forse modificando si verifica un errore nello script.
          Riprova ritornando allo script originale che hai scaricato e vedi se funziona, se va effettui le tue modifiche.
          Fammi sapere.

          20 aprile 2010
  • […] il plugin per il menu verticale l'ho preso da qui: http://www.mainickweb.com/menu-verticale-jquery-con-effetto-fisarmonica/ […]

    20 aprile 2010
  • Pong

    Ciao grande plug-in , è possibile aprire il menu verso l’alto ?

    20 aprile 2010
    • @Pong ciao e grazie del complimento.
      vai contro corrente, comunque devi modificare il documento html menu-verticale.html della demo che puoi scaricare, spostando le voci del menu principale dopo i rispettivi sotto-menu, e modificare il file dello script javascript script.js, scusa il gioco di parole, alla riga 10 cambiare next in prev.
      Se hai problemi sono a disposizione e buon fine settimana

      20 aprile 2010
      • pippo

        Si, ma è possibile aprire il menu verso l’alto spostando in alto anche le voci del menu principale? Perché con la modifica da te descritta il sotto menu compare sopra alle voci, io invece vorrei farle apparire sotto.

        PS
        menu fantastico!!!

        Grazie

        20 aprile 2010
    • paso

      Fantastico e creare un sotto menu del sottomenu.. ? e possibile ho provato ma no fa niente devo solo modificare i css ?

      20 aprile 2010
  • Paolo

    Ciao, sono riuscito a risolvere il problema precedente (visualizzazione su Safari), ora abusando della tua pazienza, ti chiedo: è possibile lasciare il menu’ “aperto” durante la navigazione?
    Ovvero, se apro una categoria (nel tuo esempio i titoli rossi) e clicco su un sottomenu’, automaticamente il menu’ si richiude, costringendo l’utente ad aprirlo nuovamente per continuare a navigare.
    Puoi aiutarmi? grazie mille 🙂

    20 aprile 2010
  • Stefano

    scusami!!! ho un problema!! è possibile applicare l’apertura dei sottomenu clickando direttamente sul pulsante?? invece che sulla freccetta??? se sì come si fa?? $(document).ready(function(){

    $.easing.def = “easeOutBounce”;

    $(‘li.title’).click(function(e){

    var subMenu = $(this).parent().next();

    $(‘.sub-menu’).not(subMenu).slideUp(‘slow’);
    subMenu.stop(false,true).slideToggle(‘slow’);

    e.preventDefault();
    })

    });

    ho lasciato solo li.title > mi crea problemi non mi funziona su tutto il pulsante. sai xchè???

    20 aprile 2010
  • pino

    ciao, come è possibile creare un sottomenu del sottomenu?

    grazie

    20 aprile 2010
    • Ciao Pino, se vogliamo partire dalla stessa struttura realizzata nel tutorial, dobbiamo fare un paio di modifiche a tutti e tre i file che compongono l’esempio.
      Nel documento HTML dobbiamo inserire un sotto menu ad una voce di sotto menu del menu principale. Il li del sotto menu (menu di 2° livello) a cui vuoi aggiungere un “sotto sotto menu” (menu di 3° livello) deve essere sostituito con il seguente codice:

      <li>
      <ul>
      <li class="title-sub-menu"><a href="http://www.mainickweb.com/creare-un-menu-a-lista-in-ordine-alfabetico-con-jquery/">Articolo 1</a></li>
      <li class="sub-sub-menu">
      <ul>
      <li><a href="http://www.mainickweb.com/">Sotto sotto menu - voce 1</a></li>
      <li><a href="http://www.mainickweb.com/">Sotto sotto menu - voce 2</a></li>
      </ul>
      </li>
      </ul>
      </li>

      Nel foglio di stile CSS aggiungiamo altre due regole:

      .sub-sub-menu {
      /* Sotto menu */
      display: none;
      width: 100%;
      padding-top: 5px;
      }

      .sub-sub-menu li {
      /* Voci del sotto menu */
      margin: 5px 0;
      padding: 4px 18px;
      border: 1px solid #40392c;
      background-color: #2F2F2F;
      color: #cccccc;
      }

      con le quali applichiamo lo stesso stile del sotto menu di 2° livello al sotto menu di 3° livello. Per ridurre le righe di codice possiamo aggiungere il selettore del sotto menu di 3° livello alle regole indicate per il sotto menu di 2° livello.
      Infine il file javascript va aggiunto lo script per determinare la stessa funzionalità del sotto menu di 2° livello al nuovo sotto menu di livello inferiore:

      /* Associare una funzione all'evento click sul link */
      $('li.title-sub-menu > a').click(function(e){

      /* Finding the drop down list that corresponds to the current section: */
      var subMenu = $(this).parent().next();

      /* Trovare il sotto menu che corrisponde alla voce cliccata */
      $('.sub-sub-menu').not(subMenu).slideUp('slow');
      subMenu.stop(false,true).slideToggle('slow');

      /* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
      e.preventDefault();
      });

      come puoi notare il codice è uguale, cambiano solo i selettori.

      20 aprile 2010
      • pino

        Mai, davvero non so come ringraziarti!

        20 aprile 2010
        • Di niente è un piacere aiutare i miei lettori.

          20 aprile 2010
          • fabiana

            Ciao Nick, anzituuto grazie per il bellissimo Tutorial.
            Vorrei aggiungere alle voci del submenu altri sub menu.
            ho visto che hai già dato la soluzione a Pino nell’altra versione del tutorial, ti scrivo da qui perchè io ho utilizzato questa e no riesco a farla funzionare.

            Ho aggiunto come dici tu le regole al foglio di stile CSS:
            .sub-sub-menu {
            /* Sotto menu */
            display: none;
            width: 100%;
            padding-top: 5px;
            }

            .sub-sub-menu li {
            /* Voci del sotto menu */
            margin: 5px 0;
            padding: 4px 18px;
            border: 1px solid #40392c;
            background-color: #2F2F2F;
            color: #cccccc;
            }

            Ho aggiunto aggiunto lo script al file javascript :

            /* Associare una funzione all’evento click sul link */
            $(‘li.title-sub-menu > a’).click(function(e){

            /* Finding the drop down list that corresponds to the current section: */
            var subMenu = $(this).parent().next();

            /* Trovare il sotto menu che corrisponde alla voce cliccata */
            $(‘.sub-sub-menu’).not(subMenu).slideUp(‘slow’);
            subMenu.stop(false,true).slideToggle(‘slow’);

            /* Prevenire l’evento predefinito (che sarebbe di seguire il collegamento) */
            e.preventDefault();
            });

            é nel documento HTML che penso di sbagliare, ti scrivo il mio:

            AIR

            AG-92
            FAS 6004

            mi piacerebbe che al click degli articoli AG-92 e Fas 6004 si aprissero altri articoli, puoi aiutarmi?
            Ti ringrazio anticipatamente
            fabiana

            20 aprile 2010
          • fabiana

            scusa riprova a mettre il mio html

            AIR

            AG-92
            FAS 6004

            20 aprile 2010
          • fabiana

            Ciao Nick, scusa, ma come mai non prende il mio codice html?

            20 aprile 2010
  • […] […]

    20 aprile 2010
  • lorenzo

    Ciao!!! scusa la domanda banale. ma non riesco a far funzionare solo il link sulla voce principale. Nei sottomenù funziona ma se volessi mettere una voce solo con il link senza sottomenù non riesco a far funzionare il link. dove sbaglio?

    20 aprile 2010
    • Ciao, se ho capito bene vuoi il menù spiegato nel tutorial senza che abbia il sottomenu. Devi cancellare il blocco di codice HTML <li class="sub-menu"> e non aggiungere alla pagina lo script javascript.

      20 aprile 2010
      • lorenzo

        Io vorrei fare una cosa tipo questa:

        torna a google

        senza sottomenù ma che cliccando sopra invece di espandersi vada al link.si può fare?

        20 aprile 2010
        • Ok avevo capito bene, puoi seguire quello che ti ho scritto sopra.

          20 aprile 2010
          • lorenzo

            Ciao! si però io volevo che solo quello non fosse con il sotto menù.. mentre le altre voci si…è possibile?

            20 aprile 2010
          • Ok, allora aggiungi lo script JavaScript alla pagina e modificalo aggiungendo dopo la riga $('li.title a').click(function(e){ un IF che contiene tutto il codice if ( $(this).parent().next().hasClass('sub-menu') ) {

            20 aprile 2010
          • lorenzo

            ciao!!! grazie per la pazienza!!! allora ora funziona ma non espande le altre voci. il codice è venuto così:

            $(‘li.title a’).click(function(e){
            if ( $(this).parent().next().hasClass(‘.sub-menu’) ) {
            /* Finding the drop down list that corresponds to the current section: */
            var subMenu = $(this).parent().next();

            /* Trovare il sotto menu che corrisponde alla voce cliccata */
            $(‘.sub-menu’).not(subMenu).slideUp(‘slow’);
            subMenu.stop(false,true).slideToggle(‘slow’);

            /* Prevenire l’evento predefinito (che sarebbe di seguire il collegamento) */
            e.preventDefault();}
            })

            dove ho sbagliato? alla riga aggiunta da te ho solo aggiunto un . alla sub-menu perchè prima non funzionava. questo che ti ho postato funzion ma non espande gli altri.
            grazie mille

            20 aprile 2010
          • In realtà è corretto non mettere il punto perché già stai indicando l’attributo class, comunque va bene anche con il punto.
            Ho modificato i file e ho messo come esempio la prima voce che punta al sito Google, puoi scaricare i file da questo link.

            20 aprile 2010
          • lorenzo

            Perfetto!!! grazie mille…

            20 aprile 2010
  • Lo stile non è bellissimo ma almeno è modificabile… il menu funziona bene!!!

    20 aprile 2010
  • Gabriella

    ciao! innanzitutto complimenti, ho trovato il menu molto utile..!! vorrei però chiederti due cose:
    1) se volessi eliminare l’effetto rimbalzo una volta che il menù scende per intenderci, come devo fare?
    2) come faccio ad inserire il tuo pacchetto (jquery e foglio di stile) dentro un sito già iniziato? perchè riesco a vederlo e modificarlo ma non so come inserirlo dentro al mio sito che ho già iniziato a fare…(con dw)
    scusa le domande magari banali ma sono agli inizi..

    grazie!

    20 aprile 2010
    • Grazie Gabriella. Per inserire il menu nel tuo sito web devi copiare la parte del foglio di stile relativa al solo menu dalla riga 19 alla riga 82, collegare i javascript di jQuery e il file script.js e infine copiare dalla pagina html tutto la parte in riferimento all’elenco ul e, ovviamente, cambiare le voci di menu con i relativi link.
      Per eliminare l’effetto non è necessario collegare alla pagina html il file jquery.easing.1.3.js ed eliminare la riga 4 dal javascript script.js

      20 aprile 2010
      • Gabriella

        come faccio a collegare i javascript di jQuery e il file script.js con dreamweaver? (CS6)

        20 aprile 2010
  • Giovanni

    Ciao,
    complimenti è troppo bello questo menu volevo solo chiederti come faccio a modificare lo script per fare in modo che quando apro il sottomenu e vado sulla pagina collegata mi rimane aperto il sottmenu ?
    ne ho assolutamente bisogno grazie mille
    grazie

    20 aprile 2010
  • Gabriella

    Scusa posso avere una risposta anche io? 😉 saresti gentilissimo.. sto preparando un esame e mi servirebbe

    Grazie!

    20 aprile 2010
    • Ciao Gabriella ti ho risposto al commento sopra

      20 aprile 2010
      • Gabriella

        Grazie scusami ma non mi visualizzava alcuna risposta prima 🙂 ora la vedo, gentilissimo!!

        20 aprile 2010
  • Sebastiano

    Ciao ti voglio chiedere come faccio a cambiare i colori delle voci (Articolo 1 ecc)

    20 aprile 2010
    • Ciao Sebastiano, puoi modificare le proprietà delle regole .sub-menu li alla riga 75 e a alla riga 116 del foglio di stile dell’esempio che hai scaricato.

      20 aprile 2010
  • Dave

    Ciao davvero ottimo devo dire..:) Però ho un problema. Ho provato a inserire un sotto menu a un sotto menu… Fin li ok, solo che una volta che apro il secondo sotto menu, la tendina con il sotto menu mi viene chiusa, e quando provo a riaprirla il menu si apre senza problemi.. Hai qualche idea?

    20 aprile 2010
  • Franco

    Bellissimo script, volevo chiederti come poter fare in modo che se una persona clicca al di fuori del menu il menu scompaia?

    20 aprile 2010
  • Flo

    ciao, ho trovato questo bellissimo menu e provo a fare un po di prove a modificarlo su alcuni aspetti … tolto il rimbalzo che cera sono riuscito a fare pure il passo di usare un pulsante come semplice pulsante e non per aprire un sotto menu … il mio problema e questo pero … vorrei che il pulsante che apre il sotto menu possa essere usato a suo tempo come pulsante proprio .. cioe quando cliko su google che si apra il sotto menu come ora per altre 3 pagini ma allo stesso momento che mi porti alla pagina google ad sempio con delle info principale … come posso risolvere questo problema? grazie per il tuo aiuto

    20 aprile 2010
  • Ciao
    pensavo di utilizzare il tuo script nel mio sito. L’ho provato in locale e mi piace molto.
    Volevo chiederti una cosa: quando si seleziona un link principale dopo che vengono visualizzati i link contenuti mi piacerebbe che il link principale rimanesse evidenziato di un determinato colore in modo da far capire in quale voce siamo. E’ possibile ?. se si puoi dirmi come si fa ?.
    Grazie.

    20 aprile 2010

LEAVE A REPLY