Home - Tutorial - Jquery - Menù Verticale Tendina con Jquery
menù verticale tendina con jquery
menù verticale tendina con jquery

Menù Verticale Tendina con Jquery

Tutorial per costruire un menù verticale tendina con jquery

In questo tutorial vedremo come costruire, in modo semplice e con poche righe di codice, un menù verticale tendina con jQuery, il frameworks di JavaScript, dove questo sarà il risultato:

Pagina Demo

Questo tutorial è rivolto a chi ha già delle nozioni di HTML, e vuole implementare del codice Jquery, per creare delle pagine web più dinamiche ed accattivanti.

Iniziamo subito a scrivere il codice in HTML per creare le varie voci del menù e sotto menù, con una lista di titoli tra i tag <ul> e <li>

<!doctype html>
<head>
<meta charset=’utf-8′>
</head>
<body>
<div id=’menu’>
<ul><li><a href=’#’>Categorie</a><ul>
<li><a href=’#’>Categoria 1</a></li>
<li><a href=’#’>Categoria 2</a></li>
<li><a href=’#’>Categoria 3</a></li>
</ul></li>
<li><a href=’#’>Chi Siamo</a>
<ul>
<li><a href=’#’>Azienda</a></li>
<li><a href=’#’>Contatti</a></li>
</ul></li>
<li><a href=’#’>Articoli</a>
<ul><li><a href=’#’>Articolo 1</a></li>
<li><a href=’#’>Articolo 2</a></li>
<li><a href=’#’>Articolo 3</a></li>
</ul></li></ul>
</div></body>
<html>

Bene, il primo passaggio è fatto, abbiamo creato ciò che sarà la struttura del nostro menù, con le voci che compongono il menù e sotto menù come nella foto sotto

passo 1 menù verticale

A questo punto passiamo alla programmazione Jquery per creare il menù verticale tendina con jquery
Richiamiamo tra i tag <head></head>, l’istruzione che richiama il framework, direttamente dal sito sito di Jquery con questa riga:
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
Adesso cominciamo a scrivere il codice Jquery per animare il nostro menù, subito sotto l’istruzione di richiamo del framework, inseriamo i tag <script> qua inseriremo il codice Jquery </script>

$( document ).ready(function() {
$(‘#menu > ul > li > a’).click(function() {
var clicca = $(this).next();
if((clicca.is(‘ul’)) && (clicca.is(‘:visible’))) {
clicca.slideUp(‘normal’);
}
if((clicca.is(‘ul’)) && (!clicca.is(‘:visible’))) {
$(‘#menu ul ul:visible’).slideUp(‘normal’);
clicca.slideDown(‘normal’);
}
});
});

questo è il risultato, provate a cliccare su “Categorie”, “Chi Siamo” e “Articoli” e vedrete che i Sotto Menù compaiono e scompaiono

Così però non va ancora bene, i sotto menù sono aperti e visibili, solo dopo alcuni clic, i sotto menù si chiudono, allora completiamo il tutto scrivendo il foglio di stile per dare forma e logica al nostro menù.
Sempre tra i Tag <head></head>, scriviamo il nostro CSS, inserendo queste linee:

<style>
#menu, #menu ul, #menu li, #menu a {
margin: 0; padding: 0; border: 0; list-style: none; text-decoration: none; line-height: 1; position: relative;
}
#menu a {
line-height: 1.5; padding: 7px 15px;
}
#menu {
width: 200px; font-size: 14px; font-family: verdana; font-weight:bold;
}
#menu > ul > li {
cursor: pointer; border-bottom: 2px solid #000000;
}
#menu > ul > li > a {
display: block; color: #ffffff; background: #CB590C;
}
/* sotto menù */
#menu ul ul {
padding: 0; display: none;
}
#menu ul ul a {
background: #efefef; display: block; color: #797979;
}
#menu ul ul li {
border-bottom: 1px solid #c9c9c9;
}
</style>

Molto bene, adesso quadra tutto e analizziamo le poche righe di Jquery che ci hanno permesso di ottenere ciò.

a) – $(‘#menu > ul > li > a’).click(function(); – istruzione che dice: se clicchiamo sul link del tag li dentro ul contenuto nell’ID #menu, esegui i comandi che seguono

b) – var clicca = $(this).next(); – assegniamo alla variabile clicca il valore dell’intera istruzione contenuto nella riga a) (per non stare a riscrivere tutto)

c) – if((clicca.is(‘ul’)) && (clicca.is(‘:visible’))) { clicca.slideUp(‘normal’); } – se clicchiamo, come indicato nell’istruzione a) e il tag ul (contenuto nel tag li dentro ul nell’ID #menù) è visibile, allora rendilo invisibile con un SlideUp, con velocità normale

d) – if((clicca.is(‘ul’)) && (!clicca.is(‘:visible’))) { $(‘#menu ul ul:visible’).slideUp(‘normal’); clicca.slideDown(‘normal’); – questa riga di istruzioni esegue il contrario come da istruzione c), ciò è deducibile dal frammento di codice  (!clicca.is(‘:visible’), dove il simbolo ! (punto esclamativo) prima della variabile clicca inverte al contrario il valore di visible, pertanto se il sotto menù è invisibile lo rende visibile.

Come avete visto con questo Tutorial, un menù verticale tendina con jquery, con poche righe di  codice abbiamo costruito un menù che con il solo codice HTML non avremmo potuto fare, o farlo con JavaScript si sarebbero scritte righe e righe di codice in più.

Adesso divertitevi ad aggiungere righe di menù con i tag ul e li, o a smanettare, con il foglio di stile in CSS, per cambiare i colori del menù, i font, e le dimensioni.

In una prossima lezione vedremo come richiamare i componenti del menù da un DataBase MySql con PHP. in modo da rendere il tutto molto più dinamico e versatile.

…Se non avete voglia di scrivere tutto il codice potete scaricarlo dal link sotto

Download “Menù verticale jquery” menuvert.rar – Scaricato 45 volte – 819 B

Lascia un Commento

Il tuo indirizzo email non verrà pubblicato.I campi obbligatori sono evidenziati *

*