Menu a tendina HTML e CSS: download gratuito.

Cerchi un menu a tendina HTML e CSS per il tuo sito web?
Sei un web designer e ti serve un menu responsive dal design intuitivo e semplice con un CSS facile da modificare?
Ho sviluppato un CSS responsive personalizzato che talvolta abbiamo utilizzato nei nostri progetti di web design.
Guarda la demo e scarica l'ultima versione del menu HTML.

Vuoi modificare il menu html per il tuo progetto di web design? Leggi la guida passo passo per modificare il menu CSS responsive.
Scarica lo .ZIP del menu a tendina CSS o visualizza la demo e scopri se questo strumento fa al caso tuo. Anche se non sei molto pratico del linguaggio HTML e CSS potrai fare alcune modifiche al codice per adattarlo velocemente alle tue pagine web. Ti spiegherò le parti essenziali da modificare per ottenere velocemente un menu per il tuo sito web senza l'utilizzo di Javascript che appesantisce il caricamento della pagina.

menu a tendina html e css responsive con design minimal e semplice
Argomenti

Codice HTML per il menu a tendina.

Una barra fissa (.bar) in alto alla pagina precede il nav. Essa contine il pulsante per attivare il menu nella versione mobile tramite la classe .menu-visibility.

Il codice HTML5 del menu è molto semplice: utilizzo il tag nav che racchiude un insieme di liste annidate. Le due tendine del menu a discesa sono, di default, sotto la voce "prodotti" e "servizi". L'ultima lista è il dropdown della "lingua", ideale per realizzare piccoli siti web multilingua.

Codice CSS responsive per menu mobile

Andiamo a scoprire insieme le parti essenziali del responsive menu CSS per poter modificare il codice.
Dopo la prima parte di "reset" trovi il codice CSS relativo al menu mobile. Cliccando sull'icona in alto (hamburger) attivi una select che attiva il menu verticale.
La classe .active (di default nella pagina home) colora il backgound-color della pagina attiva. Da notare che le tendine sono aperte nella versione per smartphone e tablet: una scelta di UI (User Experience) per permettere all'utente di visualizzare tutto il contenuto senza fare ulteriori tap.
Le voci "prodotti" e "servizi" sono di colore diverso perchè non cliccabili. Potrai modificare tutte queste scelte in base alle tue esigenze.

Menu a comparsa: la barra fissa e l'animazione dell'icona hamburger

La barra colorata che contiene il logo e l'icona del menu rimane fissa per la versione mobile e desktop. Puoi personalizzare le interazioni e le animazioni CSS: molti siti web propongono animazioni originali come Free Fronted e Little Snippets. Ecco il codice per l'animazione dell'icona hamburger e, a seguire, la regola che attiva il menu a comparsa:

Codice CSS responsive per il menu orizzontale nella versione desktop

Media screen per versione mobile e desktop

Questo menu orizzontale css contiene un solo media screen aggiuntivo per adattare il menù nella alla desktop. Ho fissato il Break Point a 980px. Questo è il codice CSS che serve a formattare il menù orizzontale.

Dropdown o tendina: attivare il menu a discesa HTML

Il codice permette di attivare la tendina del menu con l'hover. Le righe seguenti permettono di modificare le regole del dropdown:

Colori e icone per un menu a tendina dal design semplice e bello

menu a tendina html con design minimal e semplice

Ho utilizzato 3 colori per il menu css responsive identificati con un commento accanto al codice colore: primary color, primary lightcolor e primary super-lightcolor. (es. #B3453E=primary lightcolor).
Vuoi cambiare la palette cromatica del menu? Sostituisci i codici e personalizza il tuo menu velocemente.
Le icone che vedi come ad esempio il "mappamondo" o le "freccette" del menu orizzontale sono ottenute importando nel codice css gli .svg:
Ho utilizzato Google Font per importare il carattere tipografico: Roboto Slab.
Scarica il menu:

Conclusioni sul mio menu responsive HTML CSS

Sono un graphic design e web designer e mi occupo di User Experience. Questo progetto è stato sviluppato per i miei siti web. Puoi vedere i miei lavori sul notro portfolio. Negli anni ho cercato di migliorare l'esperienzza di navigazione degli utente, migliorando e snellendo il codice HTML5 e CSS e testando i risultati su vari dispositivi e browser. Se hai suggerimenti su come migliorare l'UX e la programmazione del codice scrivimi pure.

- Andrea

Contattaci!
Andrea Biagi graphic designer - art director - designer
Articolo di Andrea Biagi
Graphic Designer a Chef Studio

Qui a Chef Studio mi occupo di Grafica, User Interface Design e Illustrazione. Nel tempo libero amo surfare, giocare ai videogiochi e a calcio. Mi piace anche dipingere e disegnare.

Leggi tutti gli articoli