Pubblicato il 13/08/12e aggiornato il

Large Drop Down Menu per Blogger.

Come installare su Blogger il Large Drop Down Menu per mostrare dei sottomenù su tre colonne con effetto slide.
Il menù che vado a presentare rappresenta una valida alternativa per siti che vogliono mostrare ai visitatori una gran mole di articoli e di link. Come tutti i menù per Blogger ci possono essere modelli in cui funzionano e altri in cui non si riescono a aprire i sottomenu. Non si può dire nulla a priori sulla compatibilità o meno del menù rispetto a un dato template. Occorre testare per verificare.

Il Large Drop Down Menù utilizza JQuery e quindi i modelli in cui già esiste questa libreria possono fare a meno di caricarlo nuovamente mentre quelli che utilizzano javascript diversi possono avere problemi di compatibilità. E' comunque sempre opportuno aggiornare JQuery alla sua ultima versione.

Il Large Drop Down Menù si deve a Codrops, se ne può vedere la Demo e scaricare il codice sorgente. Si tratta di un file ZIP che contiene il javascript, il CSS e l'HTML di esempio.



Il menù funziona anche con Internet Explorer e ha la particolarità che le voci principali si allargano (fino a 510 pixel) per mostrare le voci secondarie del menù con un effetto slice molto suggestivo. I sotttomenù sono visualizzati su tre colonne e alla fine di ciascuna di essi è presente un nuovo link (+NEW DEALS nel codice di esempio) che serve per linkare gli articoli pubblicati recentemente su quel tema.

large-drop-down-menu

Naturalmente tutti i nomi delle voci e tutti i link del menù possono e anzi debbono essere modificati inserendo i collegamenti ai nostri post, alle nostre pagine statiche o a pagine web esterne.

Per l'installazione, dopo aver salvato il template per un eventuale ripristino, si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla il seguente codice

/* Large Drop Down Menu */ 
ul.ldd_menu{
    margin:0px;
    padding:0;
    display:block;
    height:50px;
    background-color:#D04528;
    list-style:none;
    font-family:"Trebuchet MS", sans-serif;
    z-index:9999;
    border-top:1px solid #EF593B;
    border-bottom:1px solid #EF593B;
    border-left:10px solid #D04528;
    -moz-box-shadow:0px 3px 4px #591E12;
    -webkit-box-shadow:0px 3px 4px #591E12;
    -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
    text-decoration:none;
}
ul.ldd_menu > li{
    float:left;
    position:relative;
}
ul.ldd_menu > li > span{
    float:left;
    color:#fff;
    background-color:#D04528;
    height:50px;
    line-height:50px;
    cursor:default;
    padding:0px 20px;
    text-shadow:0px 0px 1px #fff;
    border-right:1px solid #DF7B61;
    border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:50px;
    width:550px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;
    background: #C34328;
    border-top:1px solid #EF593B;
    -moz-box-shadow:0px 3px 4px #591E12 inset;
    -webkit-box-shadow:0px 3px 4px #591E12 inset;
    -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
    background-color:#f0f0f0;
    color:#444;
    display:block;
    clear:both;
    padding:15px 20px;
    text-transform:uppercase;
    font-family: Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:0px 0px 2px #777 inset;
    -webkit-box-shadow:0px 0px 2px #777 inset;
    -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
    list-style:none;
    float:left;
    border-left:1px solid #DF7B61;
    margin:20px 0px 10px 30px;
    padding:10px;
}
li.ldd_heading{
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color:#FFB39F;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
    font-family: Arial, serif;
    font-size:10px;
    line-height:20px;
    color:#fff;
    padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
    -moz-box-shadow:0px 0px 2px #333;
    -webkit-box-shadow:0px 0px 2px #333;
    box-shadow:0px 0px 2px #333;
    background:#AF412B;
}

Ci sono moltissimi parametri che possono essere modificati quali i codici dei colori, lo stile dei bordi, la dimensione dei caratteri (font-size) e il grado di opacità (opacity:0.95; il massimo è 1.0.).
Si cerca adesso la riga </head> e, subito sopra, si incolla quest'altro codice

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>        <script type='text/javascript'>
    //<![CDATA[
            $(function() {               
                var $menu = $('#ldd_menu');         
                    $menu.children('li').each(function(){
                    var $this = $(this);
                    var $span = $this.children('span');
                    $span.data('width',$span.width());                   
                    $this.bind('mouseenter',function(){
                        $menu.find('.ldd_submenu').stop(true,true).hide();
                        $span.stop().animate({'width':'510px'},300,function(){
                            $this.find('.ldd_submenu').slideDown(300);
                        });
                    }).bind('mouseleave',function(){
                        $this.find('.ldd_submenu').stop(true,true).hide();
                        $span.stop().animate({'width':$span.data('width')+'px'},300);
                    });
                });
            });
    //]]>        
        </script>

La prima riga in blu si riferisce a JQuery e può essere tralasciata se fosse già presente. Si possono settare la larghezza dei sottomenù (510 pixel) e la velocità di scorrimento (300). Si salva il modello.
Dobbiamo adesso creare il nostro menù inserendo voci e link. Vi posto quello usato dall'autore
Gli URL devono essere incollati al posto dei cancelletti ( # ). Si possono togliere o aggiungere delle voci ai sottomenu rispettivamente eliminando o incollando nuovi elementi <li> … </li>. Per aggiungere nuove voci principali si devono invece inserire nuovi elementi sempre del tipo  <li> … </li> nella classe class="ldd_menu". In pratica basta rispettare la sintassi dell'esempio. Dopo che è stato creato il codice del menù si va su Layout > Aggiungi un gadget > HTML/Javascript, si incolla in Sezioni del sito e si Salva. Successivamente conviene posizionare il Large Drop Down Menù sotto l'Intestazione del blog e confermare cliccando su Salva disposizione.




7 commenti :

  1. Sei un vulcano .... ma anche questo, A ME, non funziona.
    POsizionato Sopra la sezione POst non si "espande".

    RispondiElimina
    Risposte
    1. Aggiungo un "appunto" ... non c'è nessuna possibilità di intervenire sul widget "archivio blog" modificando anno, mese ... con testo personalizzato?
      Perchè in ogni caso quello è un menù espandibile.
      Scusa e Grazie.

      Elimina
    2. @ pier
      Se il menù non si espande non funziona JQuery nel tuo template e allora c'è poco da fare. Per l'Archivio c'era un bellissimo widget che funzionava con i modelli più vecchi e con quelli scaricati da internet e che anch'io ho avuto nel blog per diversi mesi
      http://www.ideepercomputeredinternet.com/2009/12/il-fantastico-widget-dell-con-il.html
      In basso a destra di questa pagina c'è una demo
      http://numeri-navigazione.blogspot.it/

      Elimina
    3. Grazie.
      Sarebbe utile segnalare i modelli che usi tu per fare le tue pagine demo....
      Se funzionano a te c'è qualche motivo per cui ai tuoi lettori non funzionano?

      Ad esempio .. che modello Blogger hai utilizzato per fare la demo di questo post? o di questo blog di prova http://demo-parsifal32.blogspot.it/2010/02/demo-del-menu-multilivello.html

      Grazie

      Elimina
    4. @ pier
      Il modello di quel blog non è più disponibile. E' antecedente alla introduzione del Designer Modelli. Comunque si può facilmente scoprire il modello di un sito. Basta pigiare su Ctr+U (OS Windows). Si aprirà un'altra scheda con il sorgente pagina del blog in cui si vede tutto il suo codice. Scorrendolo si arriva anche al nome e autore del template. Nel caso del blog di prova le informazioni sono

      /*
      * Tekka
      * style modified from glish: http://www.glish.com/css/
      *
      * Updated by Blogger Team

      Elimina
    5. Comunque con una rapida ricerca si può sempre trovare anche se non fa più parte dei modelli ufficiali di Blogger
      http://www.blogcrowds.com/resources/blogger-templates/12-tekka
      Si può scaricare il codice completo o solo quello basic

      Elimina
    6. Mama mia un'informazione cosi maldestra mai vista!

      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.