Fw

Wordpress Creative Developer

Tutorial jQuery – Large Drop Down Menu

  • Tutorial Jquery
  • -

Ritorna l’appuntamento con i tutorial jquery, dove oggi andiamo a vedere come utilizzare al meglio un fantastico mega menu dropdown, realizzato da Cod Rops.

Il menu è stato pensato per siti con molte pagine, per le quali di solito è difficile trovare una soluzione elegante per la navigazione.

Tutorial jQuery - Mega Menu Dropdown

Non è stato spiegato come utilizzare il menu e chi è alle prime armi potrebbe essere in difficoltà nell’adattarlo alle proprie esigenze.

Vediamo quindi come usare al meglio questa potente risorsa.

Codice HTML

Di seguito viene mostrato il codice per il sottomenu vacation; gli altri sono realizzati allo stesso modo.


Codice CSS

Per quanto riguarda il foglio di stile CSS vediamo quali sono le proprietà principali chedobbiamo modificare per adattare il menu alle nostre esigenze.

ul.ldd_menu: modifica delle caratteristiche del menu principale.

ul.ldd_menu{
    margin:0px;
    padding:0;
    display:block;
    height:50px; /*altezza barra menu*/
    background-color:#D04528; /*colore sfondo menu*/
    list-style:none;
    font-family:"Trebuchet MS", sans-serif; /*carattere menu*/
    border-top:1px solid #EF593B; /*stile bordo superiore*/
    border-bottom:1px solid #EF593B; /*stile bordo inferiore*/
    border-left:10px solid #D04528; /*stile bordo sinistro*/
    -moz-box-shadow:0px 3px 4px #591E12;
    -webkit-box-shadow:0px 3px 4px #591E12;
    -box-shadow:0px 3px 4px #591E12;
}

ul.ldd_menu > li > span: modifica delle caratteristiche delle tre voci principali del menu.

ul.ldd_menu > li > span{
	float:left;
	color:#fff;/*colore voci menu*/
	background-color:#D04528;/*colore sfondo*/
	height:50px; /*altezza voci menu*/
	line-height:50px; /*allineamento verticale centrato*/
	cursor:default;
	padding:0px 20px;
	text-shadow:0px 0px 1px #fff;
	border-right:1px solid #DF7B61; /*stile bordo destro*/
	border-left:1px solid #C44D37; /*stile bordo sinistro*/
}

ul.ldd_menu .ldd_submenu: modifica delle caratteristiche del sottomenu.

ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:50px;/*deve essere uguale all'height in ul.ldd_menu*/
    width:550px;/*larghezza sottomenu*/
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;/*dimensione font*/
    background: #C34328;/*colore sfondo*/
    border-top:1px solid #EF593B;/*caratteristiche bordo superiore*/
    -moz-box-shadow:0px 3px 4px #591E12 inset;
    -webkit-box-shadow:0px 3px 4px #591E12 inset;
    -box-shadow:0px 3px 4px #591E12 inset;
}

Codice jQuery

Le ultime righe di codice (racchiuse tra i tag <script></script), sono necessarie per applicare l’effetto visto nella demo. Di seguito trovi quelle rilevanti per personalizzare l’effetto.

/*gestione comportamento passaggio mouse sopra voci menu*/
$this.bind('mouseenter',function(){
    $menu.find('.ldd_submenu').stop(true,true).hide();
    $span.stop().animate({'width':'510px'},300,function(){/*eliminare
    questa riga di codice per non avere l'animazione di espansione voci menu*/
        $this.find('.ldd_submenu').slideDown(300);/*velocità animazione*/
    });/*eliminare le parentesi se viene eliminata la riga menzionata*/

/*gestione comportamento mouse fuori voci menu*/
}).bind('mouseleave',function(){
    $this.find('.ldd_submenu').stop(true,true).hide();
    $span.stop().animate({'width':$span.data('width')+'px'},300);/*velocità effetto*/
});

Mega Menu Drop Down Inspiration

Infine ecco alcuni siti che fanno utilizzo di menu simili a quello studiato nel tutorial, per prendere un po’ di ispirazione.

Alitalia

Esempio 1 Mega Menu Drop Down

Estee Lauder

Esempio 2 Mega Menu Drop Down

Callaway

Esempio 3 Mega Menu Drop Down

Columbia Sportswear

Esempio 4 Mega Menu Drop Down

Puma

Esempio 5 Mega Menu Drop Down

Matalan

Esempio 6 Mega Menu Drop Down

13 Commenti

  1. Ciao,

    io stavo per integrare un mega menu in WordPress. Ho abbandonato il lavoro dopo aver letto diversi articoli sui pro e contro di un mega menu. Ovviamente facilita la navigazione però sballa i risultati nei motori di ricerca.

    Se io cerco una determinata cosa, di solito mi indirizza alla pagina chiamata in quel modo e contenente il titolo e i contenuti di quello che stavo cercando. Mettendo un mega menu, si aggiungono molte parole chiavi a tutte le pagine del sito e spesso capita che i risultati delle ricerche diventano imprecisi.

    Comunque farei dei test, nel tempo si vedranno i risultati. Ho letto anche su una possibile penalizzazione di Google.

    Saluti.

  2. Ciao Oleg e benvenuto nel blog 😉

    Hai fatto un’ottima osservazione, hai ragione, bisogna considerare i pro e i contro sull’utilizzo di questi menu.

    Quali soluzioni alternative si potrebbero addottare per siti con molte pagine?

  3. Per esempio si potrebbe ridurre il numero delle pagine, creando la cosideta “inline navigation” – stile Wikipedia, con un sommario dei titoli dei paragrafi grandi. Ovviamente le pagine diventerebbero un po’ più lunghe ma comunque potrebbe essere una soluzione.

    Nel menu principale non metti nessun menu a tendina ma scegli bene come chiamare le sezioni e ovviamente poi metti un menu a lato con non più di 10 link per sezione.

  4. […] Tutorial jQuery – Large Drop Down Menu | Fedeweb (tags: javascript jqery menu) […]

  5. Si mi sembra anche questa una buona soluzione, che ti fa perdere qualche secondo in più nel trovare l’informazione desiderata, ma che almeno limita i possibili problemi SEO.

    Qualcuno ha avuto esperienze in merito? ha riscontrato problemi con menu drop down con molte voci?

  6. Ma è possibile integrare questo tipo di menù su un sito joomla o wordpress, o bisogna scaricare per forza il componente?

  7. Ciao Luca e benvenuto nel blog 😉

    Si si possono integrare, anche se la cosa non è immediata. C’è un menu simile, realizzato da Sohtanka, di cui è stata proposta una soluzione per utilizzarlo in wordpress.

    Ecco i link:
    menu sohtanka
    soluzione wordpress

  8. Ciao fede,
    premetto subito con sul mio sito non c’è un menu drop down come mostri nell’esempio, ma semplicemente quando clicchi su un link si apre una tendina (“slideToggle”). Vorrei sapere se esiste un metodo per far dire che quando esci con il mouse da quella tendina, essa scompaia (FadeOut).

    Grazie in anticipo

  9. Ciao Alessandro e benvenuto nel blog 😉

    Puoi scrivere il codice dello script tra i commenti così posso aiutarti meglio?

  10. Ciao Federico,
    in questi giorni ho risolto un problema, ma se n’è aggiunto un altro.

    Questo è il mio codice:

    $(document).ready(function(){
    // Tutte le categorie
    $(“#open-filter”).click(function(){
    $(“#search-filter”).slideToggle(“slow”);
    $(this).toggleClass(“active”);
    return false;
    });
    });

    In parole povere, quando clicco su #open-filter si espande #search-filter. Se clicco nuovamente la tendina (#search-filter) si richiude. Vorrei che il link sul quale clicco,ad es. “apri”, si traformi in “chiudi”. E viceversa. E’ quel viceversa che non sono in grado di fare. A quano pare non me la cavo con un semplice $(variabile).html(“riapri”);

    Spero di essermi spiegato in italiano 🙂

  11. […] in cui ci si trova. Questa la trovo una soluzione originale, e alternativa all’utilizzo di menu mega drop down, di cui si era parlato con un tutorial tempo […]

  12. I megamenu dal punto di vista SEO non sono un problema se realizzati correttamente, ovvero se non sono infarciti di parole chiave. Inoltre Google ha la capacità di riconoscere le parti “statiche”(=ripetute) del sito in modo da evitare falsi risultati…

  13. Ciao Andrea e benvenuto nel blog 😉

    Ti ringrazio per le tue considerazioni con le quali mi trovo assolutamente d’accordo.

    E’ anche vero che non sempre è necessario utilizzare questo tipo di tecniche e l’ultimo sito che ho analizzato ne è una dimostrazione.

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *