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.

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

• Esempio di codice del Large Drop Down Menù -

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.