Menu a scorrimento verticale con css e jquery
Javascript è diventato ormai un must per tutti i designer, e va di pari passo con l’uso dei css. Con l’utilizzo di Javascript si possono realizzare effetti molto gradevoli, specialmente sui menu, ma non solo.
per facilitare il lavoro, possiamo aiutarci con uno dei tanti framework che si trovano in giro, che permettono di creare effetti usando pochissime linee di codice, Jquery è uno di questi.
personalmente lo uso e mi piace molto perchè oltre a essere veramente completo è anche uno dei framework più facili da capire e da usare.
In questo tutorial vi illustrerò come creare un semplice menu a scorrimento animato usando JQuery e css, il tutto veramente con pochissime linee di codice.
Per prima cosa bisogna scaricare il framework che potete trovare a questo indirizzo, dopodichè possiamo partire a creare il nostro menu.
É come avere una web agency in casa se si riesce a seguire esattamente le istruzioni . Per creare il menu useremo delle liste ordinate e il sottomenu con un altra lista ordinata, “inglobata” in un elemento li.
Vediamo inanzitutto il codice del menu:
<h1> MENU A SCORRIMENTO VERTICALE CON CSS E JQUERY</h1> <p>clicca sul menu "<strong>guide web webmaster</strong>" per scorrere il sottomenu.</p> <ul id="menu"> <li><a href="http://www.antoniofullone.it" title="risorse per web designer">Articoli Web design</a></li> <li><a href="http://forum.antoniofullone.it" title="forum webmaster">Forum web design</a></li> <li><a class="submenuguide" href="#" title="guide webmaster">Guide webmaster >></a> <ul id="submenu"> <li><a href="http://www.antoniofullone.it/category/guide/guida-dreamweaver-guide-2/" title="guida dreamweaver">Guida Dreamweaver</a></li> <li><a href="http://www.antoniofullone.it/category/guide/guadagnare-con-internet/" title="guadagnare con internet">Guadagnare con internet</a></li> <li><a href="http://www.antoniofullone.it/category/guide/guida-semplice-al-php/" title="guida php">Guida PhP</a></li> </ul> </li> <li><a href="http://wiki.antoniofullone.it" title="wiki web design">Wiki Web design</a></li> </ul>
Come vedete la seconda lista è contenuta all’interno di un elemento li, ora con i fogli di stile utilizzando la proprietà display nasconderemo la seconda lista per poi farla apparire quando si clicca sull’elemento.
Passiamo al foglio di stile, per rendere il menu anche più gradevole da vedere:
body{
font-family:"Trebuchet MS";
font-size:12px;
}
a{outline:none;}
h1{
margin-left:100px;
font-size:18px
}
p{
margin-left:100px;
}
ul#menu{
list-style:none;
margin:20px 0 20px 100px;
padding:0;
border:1px solid #ccc;
width:200px;
background:#f4f4f4;
text-indent:10px
}
#menu li a{
display:block;
text-decoration:none;
height:30px;
padding:5px 0;
color:#434343;
border-bottom:1px dotted #333;
}
#menu li a:hover{
background:#CCCCCC;
color:#333333;
}
ul#submenu{
display:none;
margin:0;padding:0;
list-style:none;
}
E infine passiamo al Javascript per creare l’effetto animato :
<!--
$(document).ready(function(){
$(".submenuguide").click(function(){
$("#submenu").slideToggle("slow");
});
});
// -->
Come vedete è semplicissimo da creare con poche righe di codice e senza essere esperti del linguaggio.
Analizziamo il codice per capire cosa fa JQuery:
La prima riga semplicemente serve per indicare a JQuery di eseguire il codice quando il documento è stato caricato correttamente e la seconda indica la funzione da eseguire quando verrà fatto click sull’elemento selezionato, $(.submenuguide), in questo caso ho usato una classe mentre nel secondo ho usato un selettore, questo per far capire come usare la funzione $() di JQuery, probabilmente la più potente di JQuery, per selezionare facilmente elementi del DOM attraverso classi e selettori CSS, questo riduce di molto la scrittura del codice e corrisponde in pratica al getElement di un Javascript normale.
Infine applichiamo l’effetto slideToggle all’elemento #submenu con il parametro Slow, che indica la velocità di scorrimento dell’effetto. IL tutto correttamente validato usando Xhtml 1.0 strict.
L’esempio finale completo lo potete visualizzare da questo link (guardate il codice della pagina), naturalmente non dimenticavi di linkare JQuery al vostro documento
<script type=”text/javascript” src=”jquery.js”></script>
Per scaricare il file zippato completo.
Scarica menu a Scorrimento Verticale animato con css e JQuery.
Le risorse per JQuery :
Popularity: 100% [?]
Potrebbero interessarti anche :
+'&title='+encodeURIComponent(document.title)+'&overview='+encodeURIComponent(document.title)+'&urllanguage=en&urlaffiliate=32003&encoding=UTF-8&urlpicture=http://www.viadeo.com/v_img/shareit/viadeoflower.gif')
17 commenti »
Trackbacks
-
[...] codice javascript, con adserver o cashbar non c’è bisogno di usare piu codici, ma uno solo e i banner verranno [...]
RSS feed dei commenti a questo articolo. TrackBack URL
Lascia un commento
Fantastico. Lo cercavo grazie mille
Ciao e complimenti per il tutorial. Una domanda:
qual’è la soluzione migliore per aggiungere un altro sotto menù con lo stesso effetto?
Sto tentando in vario modo ma ancora non riesco a ottenere risultati.
E’ forse necessario aggiungere una altra classe , con relativo css e un altra apposita funzione jquery ?
grazie
ciao nick, scusa il ritardo nella risposta ero al lavoro e sono appena rientrato.
si, ti sei dato la risposta da solo.
:=)
crei un altra classe , crei il css per farlo diventare submenu e po crei la funzione che aplichi alla nuova classe.
se hai problemi posta che proviamo insieme .
Ciaoo
Grazie Claudio, non dovrebbero esserci problemi
Ho un problema nell’inserire questo menu in una pagina HTML che lavora già con altri style CSS.
Prego di aiutarmi!!
Ciao Davide che tipo di problema hai?
magari se sei piu chiaro posso aiutarti meglio.
Tornando al problema di “Nick”, se io volessi aggiungere 10 menù con i rispettivi sotto menù, dovrei creare 10 classi per ogni tipo e 10 funzioni Javascript, un po scomodo. Pensavo a qualcosa di numerato in modo da tenere una funzione javascript unica, ma con parametro diverso per ogni menù, sarebbe una possibile via da seguire? C’è un modo per far interpretare questo a Jquery?
Grazie
Matteo
Ciao Matteo, certo che puoi farlo, in uqesto caso il codice cambia decisamente.
Puoi usare sempre delle liste e sotto liste e usare le funzioni next e sibling di jquery per applicare l’effetto a tutti i submenu in automatico senza farne uno per uno, ora sn al lavoro, magari quando torno a casa ti posto come fare.
Ciaoo
Grazie per la tempestiva risposta, adesso provo a cercare info sulle due funzioni e se ho qualche problema ti chiedo.
Grazie 1000
Ciao
Matteo
Scusate l’assenza nella discussione. Innanzi tutto grazie a Matteo, ho risolto come mi hai detto. Ora , tempo permettendo , mi applico sulla soluzione prospettata da Antonio. Buona codifica a tutti !!!!!!!!!!!!!!!
Io il menù lo ho fatto in modo da intercettare il click sul menù di primo livello diciamo:
$(“.menu_primo_livello”).click(function(){
$(“#menusx > li > ul”).hide(300);
$(this).children().slideToggle(“slow”);
});
(assegnando a ogni “li” le classi “menu_primo_livello” e “menu_secondo_livello” a seconda della posizione nell’albero).
Così facendo l’apertura del menù avviene correttamente, però se clicco su una “li” del secondo livello, mi si avvia ancora la funzione precedente (infatti ogni “li” del secondo livello fa parte al “li” di primo livello corrispondente”.
Si può escludere tale comportamento?.
ciao scusa la domanda.. ma in caso vorrei che il menu invece di apparire verso il basso appaia verso l’alto ? cosa dovrei modificare ?? grazie
in che senso verso sopra?
Ciao antonio sono matteo…gran bel blog complimenti!!
..una domanda xò…ma se volessi tenere il sottomenu aperto..cioè all’apertura aperto e poi che faccia il movimento normalmente!?!?..
grazie mille
@Matteo, semplicemente cambia questa linea :
ul#submenu{
display:none;
in : display:block;
e dovrebbe funzionare perfettamente.
Salve a Tutti:
BRAVISSIMO! Ci fai risparmiare lavoro. Grazie.
Cordiali Saluti
http://www.vociarmoniche.com
vociarmoniche@vociarmoniche.com
Janosecondino
_____________