Come creare un menu dropdown con Jquery

tramite: O2O
Difficoltà: media
15

Introduzione

Buongiorno e benvenuti in questa nuova guida, dove andremo a creare un menu a tendina, in inglese "informatichese" detto dropdown menu, con l'utilizzo di jQuery. I passi da seguire non sono molto complessi, in particolar modo se si è già un po' "skillati" e si conosce l'argomento che stiamo trattando. Non preoccupatevi neanche se non avete mai sentito parlare di jQuery o menu perché il lavoro che andremo a realizzare può essere utile come tutorial di avvicinamento a questo mondo visto che le operazioni non sono molto complesse. Nel passo successivo, prima di iniziare con la guida vera e propria andremo a spiegare cosa sia jQuery giusto per avere una piccola infarinatura generale.

25

JQuery non è un programma o un'applicazione da scaricare ed installare sul proprio pc, ma si tratta di una libreria JavaScript realizzata per aiutare l'utente nella scrittura di applicazioni web. Nata nel 2006 e tutt'ora in sviluppo ed evoluzione. Viene distribuito sotto licenza MIT in modo libero e gratuito. JQuery permette anche di realizzare tutto in maniera cross-browser, cioè un software che funzioni su tutti i browser in modo identico. Non sempre questo è "vero" perché alcune volte il risultato non è sempre quello desiderato su tutti i browser. Per ulteriori informazioni e per il download cliccare QUI.

35

Prima di creare il menu necessitiamo delle "voci" che andremo poi ad inserire. Per fare questo prepariamo con codice HTML delle liste. Nell'immagine possiamo vedere come creare questa porzione di codice (che non può essere riportato in quanto si creerebbe il menù nella finestra di testo). Vediamo che tramite il tag "li" andiamo a creare la lista con le voci del menu e con le sotto-voci. Vediamo che la prima e l'ultima non avranno sotto-voci mentre le due centrali si. L'immagine che probabilmente non è visualizzata nel migliore dei modo è visualizzabile in modo migliore cliccando QUI.

Continua la lettura
45

Questo passo è quello in cui andremo a realizzare con jQuery l'animazione per il menu. Nell'immagine è mostrato il codice da riportare per realizzare l'animazione di comparsa del menù. Per vedere l'immagine in modo migliore cliccare QUI. Le funzioni principali sono "slideDown" e "slideUp" che sono quelle che utilizzeremo per far comparire o scomparire il menu o meglio le voci presenti nel sotto-menu.
Il comando "delay" è il ritardo che avrà l'animazione dal momento in cui si andrà con il mouse sopra la voce principale. Più alto è quel valore più tempo ci vorrà prima che compaia il sotto-menu.

55

Quello precedente era l'ultimo passo da eseguire per realizzare il nostro menu dropdown. Il risultato non sarà molto attraente in quanto non vi è alcun css, ma non è scopo di questa guida integrare il tutto con dei fogli di stile. Il mio consiglio è quello di andare a cercare su internet un tutorial su come creare ed integrare un css o come scaricarne uno già proto all'uso. Siamo giunti al termine di questa semplice e veloce guida per realizzare un menu non molto complesso. Il mio consiglio è quello di fare un po di esperienza con jquery e poi ricercare online qualche tutorial molto più complesso o sperimentare da soli e creare oggetti sempre più complessi.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come usare jQuery Mobile

Da qualche tempo gli sviluppatori di software si sono posti il problema di creare degli “script” (particolari programmi scritti in un dato linguaggio di programmazione ...
Software

Come creare un pannello scorrevole verticale usando jQuery e CSS3

Spesso è capitato di restare colpiti dalle animazioni grafiche di qualche notizia letta in rete o da una presentazione che ci è stata sottoposta e ...
Internet

Come creare un pannello con i colori con jQuery

Gli indirizzi internet devono rispettare delle norme di estetica inequivocabili e che debbano essere sensibili ad un giudizio positivo dei lettori. Per crearli si devono ...
Programmazione

Come personalizzare la scrollbar con jQuery e CSS

Le scrollbar di default dei browser fanno a pugni con il design del tuo sito? Ti piacerebbe poter creare delle barre di scorrimento personalizzate adatte ...
Internet

Come creare uno slideshow con NivoSlivder

Se avete bisogno di utilizzare uno slideshow che sia semplice sia nell'installazione, sia nella configurazione che nell'utilizzo, allora il NivoSlivder è uno dei ...
Programmazione

Creare una tabella dinamica parametrizzata in Jquery

Spesso capita di dover inserire una tabella nelle pagine web. In alcuni casi questo è un problema perché richiede un lungo procedimento. La soluzione è ...
Programmazione

Come realizzare un finestra modale con jQuery

Una finestra modale è una finestra “figlia” bloccante, ossia una finestra che richiede una certa interazione dell’utente, prima che egli possa tornare ad operare ...
Programmazione

Come prendere le coordinate del mouse con JQuery

Il mouse è un piccolo dispositivo di cui spostamento sulla nostra scrivania determina un corrispondente spostamento del puntatore sullo schermo. Il dispositivo può essere utilizzato ...
Programmazione

Come iniziare con JSON

Sia che siate degli studenti o dei programmatori di lungo corso sicuramente conoscerete la sigla Json che sta per JavaScript Object Nation. SI tratta infatti ...
Internet

Come creare una firma animata per forum e siti web

Hai voglia di creare un qualcosa di veramente sfizioso per la tua firma animata da inserire nei forum che visiti? Hai voglia di far sorridere ...
Programmazione

Come nascondere i paragrafi in Jquery con un click

Tutte le pagine web che quotidianamente utilizziamo sono ricche di effetti di ogni tipo, la cui presenza è garantita dall'impiego del linguaggio JavaScript. L ...
Software

Come creare un'animazione con Blender

Creare delle animazioni è un’attività che interessa un grande numero di professionisti e di semplici appassionati. La moderna tecnologia e i software più evoluti ...
Windows

Imparare ad utilizzare Microsoft Powerpoint

Microsoft PowerPoint è un programma per pc, molto conosciuto e soprattutto molto utilizzato per la creazione di presentazioni. Questo software consente di personalizzare in moltissimi ...
Windows

Come creare scorciatoie da tastiera per Firefox

Mozilla Firefox è uno dei tanti browser disponibili on-line che permette la navigazione nel world wide web. Una delle caratteristiche principali di questo strumento è ...
Windows

Come creare una gif con Photoshop

Il programma più utilizzato per la modifica delle foto e la realizzazione di effetti fotografici è senza dubbio Photoshop. Questo programma, infatti, dispone di varie ...
Windows

Come aggiungere un testo a un'animazione GIF

Un'animazione in formato gif è un'immagine bitmap composta da una serie di fotogrammi. Con un buon programma di grafica bitmap e di fotoritocco ...
Programmazione

Bootstrap: cos’è e perché usarlo

Bootstrap nasce nell'anno 2010 per opera degli sviluppatori Mark Otto e Jacob Thornton. Inizialmente si presentava come un progetto interno a Twitter, ma successivamente ...
Programmazione

Come utilizzare Linq in C#

In questa guida vi fornirò tutte le indicazioni utili come utilizzare nel migliore dei modi il linguaggio Linq, vale a dire il Language-Integrated Query per ...
Windows

Come Creare Gif animate sul PC

Con l'avanzare della tecnologia le forme di intrattenimento multimediale sono aumentate e con esse anche la presenza di nuovi medium, una di questi sono ...
Windows

Come creare e modificare le query in Access

Access è un potente database relazionale che viene fornito nella suite Professional di Office e permette la creazione di applicazioni attraverso una intuitiva interfaccia per ...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer»”.