Pubblicato il 23/04/15 - aggiornato il  | 23 commenti :

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

By con etichette , , ,
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. Simona 23 aprile 2015 alle ore 20:42

    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. Ernesto Tirinnanzi24 aprile 2015 alle ore 00:01

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

      Elimina
    2. Ernesto Tirinnanzi24 aprile 2015 alle ore 00:03

      Sì funziona. Ho controllato
      @#

      Elimina
    3. Simona 24 aprile 2015 alle ore 00:28

      Grazie ora provo.
      Grazie grazie grazie!

      Elimina
    4. Simona 24 aprile 2015 alle ore 19:00

      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. Ernesto Tirinnanzi24 aprile 2015 alle ore 19:53

      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. Simona 24 aprile 2015 alle ore 20:17

      Giusto. Grazie!

      Elimina
    7. Simona 25 aprile 2015 alle ore 01:50

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

      Elimina
  2. Ernesto Tirinnanzi28 maggio 2015 alle ore 09:35

    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
    @#

    RispondiElimina
  3. Ernesto Tirinnanzi28 maggio 2015 alle ore 09:43

    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
    @#

    RispondiElimina
  4. Unknown9 dicembre 2015 alle ore 18:57

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

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi9 dicembre 2015 alle ore 19:57

      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. Unknown9 dicembre 2015 alle ore 20:17

      Questo commento è stato eliminato dall'autore.

      Elimina
    3. Unknown9 dicembre 2015 alle ore 20:27

      Ok grazie ho risolto, mi era proprio sfuggito

      Elimina
  5. Ernesto Tirinnanzi16 dicembre 2015 alle ore 11:30

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

    RispondiElimina
  6. Ernesto Tirinnanzi16 dicembre 2015 alle ore 14:15

    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
    @#

    RispondiElimina
  7. andrea quattromini11 maggio 2016 alle ore 22:05

    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. Ernesto Tirinnanzi11 maggio 2016 alle ore 23:29

      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. andrea quattromini12 maggio 2016 alle ore 00:11

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

      Elimina
  8. max27 luglio 2020 alle ore 12:23

    buongiorno
    chiedo come si fa a far restare aperta nel menu l'ultima selezione cliccata
    grazie

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi27 luglio 2020 alle ore 15:03

      Si tratta di un codice del 2015 e mi perdonerai se non mi ricordo di come l'ho creato comunque non mi pare che quello che ti interessa sia possibile attivarlo
      @#

      Elimina
  9. PSSD14 ottobre 2022 alle ore 20:28

    come posso usare la funzione "hover" per fare aprire/visualizzare i submenù al passaggio del mouse senza dover cliccare la voce del menù?

    RispondiElimina
    Risposte
    1. Ernesto Tirinnanzi14 ottobre 2022 alle ore 22:39

      Si tratta di un post di sette anni e mezzo fa e onestamente non mi ricordo che ci fosse questa possibilità. Mi spiace non poterti aiutare 😒.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy

Iscriviti a: Commenti sul post ( Atom )