Pubblicato il 23/04/15e aggiornato il

Menù Accordion Verticale Multilivello per sidebar di Blogger e Wordpress.

Come installare un menù verticale su tre livelli in una sidebar di Blogger o Wordpress del tipo Accordion con jQuery.
I Menù del tipo Accordion su più livelli per usare una espressione intuitiva sono quelli che si aprono a "soffietto" e non con la tendina come succede con la maggior parte di quelli orizzontali. Questi menù sono utili soprattutto se vogliamo utilizzare uno spazio della sidebar

Ho già presentato due menù Accordion, il primo con immagini in slide che è molto caratteristico e che può essere installato orizzontalmente o verticalmente e il secondo invece è solo verticale su due livelli basato su jQuery da inserire in una sidebar.

Il menù che vado a illustrare è su tre livelli il che è piuttosto raro per i menù Accordion, anche questo utilizza la libreria jQuery e può essere installato indifferentemente su Blogger o Wordpress senza modificare il Modello o il Tema del CMS

menu-accordion

Come vedete dalla GIF i vari livelli del menù si aprono con i click del cursore. Per la sua installazione su Blogger si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla il codice e opzionalmente il titolo. Si clicca su Salva e si posiziona. 

<style>
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script>
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();            element.siblings('li').children('ul').slideUp();            element.siblings('li').removeClass('open');            element.siblings('li').find('li').removeClass('open');            element.siblings('li').find('ul').slideUp();        }
    });
    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
    (function getColor() {
        var r, g, b;
        var textColor = $('#cssmenu').css('color');
        textColor = textColor.slice(4);
        r = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        g = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        b = textColor.slice(0, textColor.indexOf(')'));
        var l = rgbToHsl(r, g, b);
        if (l > 0.7) {
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
        }
        else
        {
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
        }
    })();
    function rgbToHsl(r, g, b) {
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;
        if(max == min){
            h = s = 0;
        }
        else {
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return l;
    }
});
} )( jQuery );
</script>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Prodotti</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Prodotto 1</span></a>
            <ul>
               <li><a href='#'><span>Marca 1.1</span></a></li>
               <li><a href='#'><span>Marca 1.2</span></a></li>
               <li><a href='#'><span>Marca 1.3</span></a></li>
               <li class='last'><a href='#'><span>Marca 1.4</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Prodotto 2</span></a>
            <ul>
               <li><a href='#'><span>Brand 1.1</span></a></li>
               <li><a href='#'><span>Brand 1.2</span></a></li>
               <li><a href='#'><span>Brand 1.3</span></a></li>
               <li><a href='#'><span>Brand 1.4</span></a></li>
               <li class='last'><a href='#'><span>Brand 1.5</span></a></li>
            </ul>
         </li>
      </ul>
  </li>   <li class='active has-sub'><a href='#'><span>Clienti</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Clienti Nord</span></a>
            <ul>
               <li><a href='#'><span>Cliente N.1</span></a></li>
               <li><a href='#'><span>Cliente N.2</span></a></li>
               <li><a href='#'><span>Cliente N.3</span></a></li>
               <li class='last'><a href='#'><span>Cliente N.4</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Clienti Sud</span></a>
            <ul>
               <li><a href='#'><span>Cliente S.1</span></a></li>
               <li><a href='#'><span>Cliente S.2</span></a></li>
               <li><a href='#'><span>Cliente S.3</span></a></li>
               <li><a href='#'><span>Cliente S.4</span></a></li>
               <li class='last'><a href='#'><span>Cliente S.5</span></a></li>
            </ul>
         </li>
      </ul>
   </li>   <li class='active has-sub'><a href='#'><span>Fornitori</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Fornitori Nord</span></a>
            <ul>
               <li><a href='#'><span>Fornitore N.1</span></a></li>
               <li><a href='#'><span>Fornitore N.2</span></a></li>
               <li><a href='#'><span>Fornitore N.3</span></a></li>
               <li class='last'><a href='#'><span>Fornitore N.4</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Fornitori Sud</span></a>
            <ul>
               <li><a href='#'><span>Fornitore S.1</span></a></li>
               <li><a href='#'><span>Fornitore S.2</span></a></li>
               <li><a href='#'><span>Fornitore S.3</span></a></li>
               <li><a href='#'><span>Fornitore S.4</span></a></li>
               <li class='last'><a href='#'><span>Fornitore S.5</span></a></li>
            </ul>
         </li>
      </ul>
   </li>   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Il codice è diviso in tre parti. La prima è il CSS che ne determina l'aspetto e in cui si possono modificare i codici dei colori per adattarli a quelli del nostro sito. La seconda è data dallo script in cui è presente jQuery nella riga evidenziata di giallo. Se nel vostro Tema o Modello fosse già presente evitate di incollare tale riga. La terza parte è invece il menù vero e proprio che può essere configurato a piacere.

CONFIGURAZIONE DEL MENÙ


Le voci principali del menù sono impostate in questo modo 

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Prodotti</span></a> </li>
   <li class='active has-sub'><a href='#'><span>Clienti</span></a> </li>
    <li class='active has-sub'><a href='#'><span>Fornitori</span></a> </li>
   <li><a href='#'>   <span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

dove al posto dei cancelletti ( # ) si incollano gli indirizzi delle pagine che vogliamo collegare. Nell'ultima voce principale si inserisce il tag class='last' quindi se si modifica la struttura occorre ricordarselo altrimenti il menù non funzionerà.  Nelle voci con dei sottomenù inseriamo invece il tag class='active has-sub' per poi creare il sottomenù che inizierà con <ul> e terminerà con </ul> e che dovrà essere incollato prima del </li> finale della riga della voce principale.  Esempio di sottomenù:

<ul>
         <li class='has-sub'><a href='#'><span>Prodotto 1</span></a>
            <ul>
               <li><a href='#'><span>Marca 1.1</span></a></li>
               <li><a href='#'><span>Marca 1.2</span></a></li>
               <li><a href='#'><span>Marca 1.3</span></a></li>
               <li class='last'><a href='#'><span>Marca 1.4</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Prodotto 2</span></a>
            <ul>
               <li><a href='#'><span>Brand 1.1</span></a></li>
               <li><a href='#'><span>Brand 1.2</span></a></li>
               <li><a href='#'><span>Brand 1.3</span></a></li>
               <li><a href='#'><span>Brand 1.4</span></a></li>
               <li class='last'><a href='#'><span>Brand 1.5</span></a></li>
            </ul>
         </li>
      </ul>

Si possono creare anche dei sottomenù del sottomenù utilizzando le classi class='has-sub' e class='last' rispettivamente per la voce principale e per l'ultimo elemento come in precedenza.


COME INSTALLARE IL MENÙ SU WORDPRESS


Per installare questo menù su Wordpress si va su Bacheca > Aspetto > Widget
 
menu-wordpress-accordion


e si trascina il widget Testo in una sidebar. Successivamente si apre e si incolla lo stesso codice

menu-wordpress

Si va su Salva quindi su Chiudi e poi si apre il blog per visualizzare il risultato.
Fonte | Slabbed Acordion Menu -




23 commenti :

  1. Ciao, grazie come sempre per tutto.
    Se volessi fare il box più piccolo per adattarlo alla mia colonna cosa devo modificare?
    (Ho individuato solo questo: "box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); ma non sono sicura)
    Grazie ancora

    RispondiElimina
    Risposte
    1. Prova a diminuire il numero della larghezza
      width: 200px;
      però non so se funzionerà
      @#

      Elimina
    2. Sì funziona. Ho controllato
      @#

      Elimina
    3. Grazie ora provo.
      Grazie grazie grazie!

      Elimina
    4. Sono riuscita a modificare la dimensione ma non riesco a farlo funzionare tutto. Mi prende i primi due bottoni, (Home e il primo titolo che tu hai messo come "Prodotti") poi il resto me lo mette come se fosse un elenco (senza i bottoni cliccabili). :(

      Elimina
    5. La Demo Funziona quindi il problema è che non hai copiato perfettamente il codice o che lo hai modificato male. Copia e incolla il codice così come è cambiando solo width: 200px; con p.e. width: 150px;
      Controlla che funzioni e solo successivamente prova a mettere le tue voci. Basta lasciare un tag e non va più nulla
      @#

      Elimina
    6. Sono impazzita ma ce l'ho fatta, ancora grazie.

      Elimina
  2. Mi puoi spiegare quali sono i codici (Tra quelli segnati in rosso) che bisognerebbe cambiare se si volesse personalizzare i colori?
    Tanti codici sono uguali, se si cambia colore, bisognerebbe cambiare tutto il "gruppo"?

    RispondiElimina
    Risposte
    1. Quando cambi un colore devi cambiare tutte le occorrenze di quel colore. È stato inserito un gradiente vale a dire nei bottoni in basso c'è un colore che diventa un altro nella parte alta per dare il senso della profondità. Per cambiare colori aiutati con questo tool
      http://www.ideepercomputeredinternet.com/2012/03/come-trovare-tutte-le-tonalita-di-un.html
      @#

      Elimina
    2. Grazie!
      Non riuscivo però a capire quale colore cambiare per lo sfondo del menu e del sub menu, potresti indicarmi quale dovrei cambiare?

      Elimina
    3. Nel commento precedente 2.a ti ho indicato un tool con cui trovare il colore giusto. Incolli il codice e scopri a che colore si riferisce quindi agisci di conseguenza
      @#

      Elimina
  3. Ciao, sono riuscito a cambiare tutto, tranne la freccietina che punta in basso :D come si fa?

    RispondiElimina
    Risposte
    1. Il codice da modificare è questo

      .holder::after {
      top: 17px;
      border-top: 2px solid #ffffff;
      border-left: 2px solid #ffffff;

      puoi cambiare il colore sostituendo #ffffff con un altro codice per il resto è meglio che lasci com'è se non sei particolarmente esperto
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Ok grazie ho risolto, mi era proprio sfuggito

      Elimina
  4. sai come posso fare per tenere aperta la voce di menu? -li class=active has-sub- ho visto che l jquery aggiuge la classe open, io vorrei che rimanghi fissa

    RispondiElimina
    Risposte
    1. Aperto il menù anche senza cliccarci sopra? Probabilmente sarà possibile però non saprei come aiutarti
      @#

      Elimina
    2. io l'ho modificato completamente, mi manca solo il jquery.. da dove l'hai preso? me lo puoi dire in pvt?

      Elimina
    3. Il jQuery è questo
      http://code.jquery.com/jquery-latest.min.js
      ma puoi usare anche questo
      https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
      @#

      Elimina
  5. Buonasera Ernesto, installato e funzionante il nuovo menu, però non visibile in versione mobile.... come posso fare per renderlo visibile non solo su desktop?
    Grazie e buon lavoro a tutti

    RispondiElimina
    Risposte
    1. Per la versione mobile devi installare un altro menu specifico. Leggi queste istruzioni
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      La prima parte nel tuo caso la puoi lasciar perdere perché il menù desktop è installato nella sidebar quindi viene ignorato dal mobile
      @#

      Elimina
    2. Scusa, ho già risolto. Ho selezionato nella versione mobile il tipo "personalizzato" e ho messo il widget sopra il post....

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.