javascript, jQuery

Semplice menu verticale scorrevole con jQuery

menu verticale scorrevole

 

In questo articolo vi mostrerò come creare un semplice menu scorrevole utilizzando jQuery. 

Al passaggio del mouse su una delle voci di menu principale viene fuori il rispettivo sub-menu, quando il mouse passa su un’altra voce del menu principale si apre il suo sub-menu chiudendo quello precedente. 

La prima cosa da fare è quella di inserire il seguente codice all’interno della sezione <head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>

Si può notare che ci sono 3 file style.css, jquery-1.3.4.min.js e menu.js: il primo file rappresenta lo stile del menu che tratterò dopo; il secondo file è la libreria jQuery 1.3.2 che potete scaricare dal sito jquery.com o caricarla direttamente dai server di Google; il terzo file contiene il codice delle funzioni ed è il seguente: 

$(document).ready(function(){
    //
    // Nascondo tutti i menu principali
    $("#menu1 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu2 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu3 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");

    $("#menu1").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu1 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu2").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu2 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu3").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu3 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });
});

La prima riga del codice precedente significa che quando viene caricato il documento vengono eseguite le funzioni al suo interno.

La prima parte del codice permette di nascondere le voci dei sub-menu, in modo che se javascript non è attivo vengono lo stesso visualizzati.

Bisogna poi creare le altri parti del codice per ogni voce di menu principale: il metodo hover di jQuery permette di catturare l’evento di passaggio del mouse sulla voce di menu e eseguire il codice al suo interno, che contemporaneamente all’apertura del rispettivo sub-menu chiude tutti gli altri sub-menu. 
Il metodo animate permette di eseguire un’animazione sull’oggetto dalla posizione iniziale alla posizione top scritta con una velocità descritta dalla durata in millesecondi dell’animazione, visualizzando o nascondendo l’oggetto impostando con il metodo css la proprietà display.

Il codice html della pagina non è altro che un insieme di elenchi non ordinati di cui ad ogni voce dell’elenco principale è creato un nuovo elenco con le voci del sub-menu: 

<div id="menu-wrapper">
    <ul>
        <li id="menu1" class="menu">
            <div class="menu-title"><a href="#" onclick="return false;">Menu 1</a></div>
            <ul class="submenu">
                <li><a href="#">Sub-menu 1.1</a></li>
                <li><a href="#">Sub-menu 1.2</a></li>
                <li><a href="#">Sub-menu 1.3</a></li>
                <li><a href="#">Sub-menu 1.4</a></li>
                <li><a href="#">Sub-menu 1.5</a></li>
            </ul>
        </li>
        <li id="menu2" class="menu">
            <div class="menu-title"><a href="#" onclick="return false;">Menu 2</a></div>
            <ul class="submenu">
                <li><a href="#">Sub-menu 2.1</a></li>
                <li><a href="#">Sub-menu 2.2</a></li>
                <li><a href="#">Sub-menu 2.3</a></li>
                <li><a href="#">Sub-menu 2.4</a></li>
                <li><a href="#">Sub-menu 2.5</a></li>
            </ul>
        </li>
        <li id="menu3" class="menu">
            <div class="menu-title"><a href="#" onclick="return false;">Menu 3</a></div>
            <ul class="submenu">
                <li><a href="#">Sub-menu 3.1</a></li>
                <li><a href="#">Sub-menu 3.2</a></li>
                <li><a href="#">Sub-menu 3.3</a></li>
                <li><a href="#">Sub-menu 3.4</a></li>
                <li><a href="#">Sub-menu 3.5</a></li>
            </ul>
        </li>
    </ul>
</div>

Ad ogni voce di elenco principale assegniamo un id a cui applicare il metodo hover per eseguire l’effetto desiderato, mentre le classi assegnato le utilizzeremo per specificare le proprietà dello stile css:

#menu-wrapper {
    position: absolute;
    height: 300px;
    overflow: hidden;
}
#menu-wrapper ul {
    margin: 0;
    padding: 0;
}
li.menu {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
div.menu-title {
    width: 200px;
    height: 33px;
    margin-right: 20px;
    background-color: #00689b;
}
div.menu-title a {
    padding-left: 15px;
    color: #fff;
    font-size: 24px;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 33px;
}
ul.submenu {
    position: absolute;
    width: 200px;
}
ul.submenu li {
    height: 22px;
    margin-bottom: 1px;
    background-color: #00689b;
    line-height: 22px;
    list-style: none;
}
ul.submenu li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

Il selettore menu-wrapper raggruppiamo tutto il menu dandogli un’altezza massima e specificando la proprietà overflow per nascondere tutto ciò che è al di fuori di esso.

La classe menu-title specifichiamo le proprietà da assegnare alle voci del menu principale; la classe submenu per le voci dei sub-menu.

Demo Codice

Spero che ti sia utile, grazie per la lettura non dimenticarti di iscriverti via RSS per tutte le novità sperando di avere più tempo libero e scrivere altri nuovi articoli.

Potrebbero Interessarti

  • Applicare CSS ad un semplice elenco7 Novembre 2008 Applicare CSS ad un semplice elenco Lista verticale HTML <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item […]
  • Menu verticale jQuery con effetto fisarmonica20 Aprile 2010 Menu verticale jQuery con effetto fisarmonica UPDATE: Ho pubblicato un secondo tutorial in cui ho riportato le modifiche richieste nei feedback, come rendere la voce del menu principale anch'essa cliccabile e poter rimanere aperto il sotto menu corrispondente alla pagina visitata. In questo tutoriale faremo un semplice menu […]
  • Creare un menu a lista in ordine alfabetico con jQuery8 Febbraio 2010 Creare un menu a lista in ordine alfabetico con jQuery ListMenu è un plugin jQuery che permette di convertire facilmente una lunga lista di elementi, difficile da navigare, in un sistema compatto di menu a liste visualizzate in ordine alfabetico, in modo che si presenti graficamente più pulita e di rapido accesso agli […]
  • 2 Giugno 2010 Rubrica contatti in stile iPhone con jQuery e CSS SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L'autore prende ispirazione dalla rabrica telefonica dell'iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una […]

Potrebbero interessarti

  • è buono per cominciare a muovere i primi passi e comprendere il funzionamento di jQuery, buon tutorial!

    8 Giugno 2009

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.