Come realizzare un menu’ a tendina con le transizioni Css3

In questo video tutorial voglio mostrarvi come realizzare un semplice menù a tendina con il codice Html5 + Css3 con due livelli di menù semplicemente utilizzando una lista non ordinata e aggiungendo le transizioni nello stile per dare una certa armonia al menù nel momento in cui effettuiamo il mouse hover.

Il videotutorial si divide in 4 fasi:

  1. struttura del menù;
  2. stile del menù di primo livello;
  3. stile del menù di secondo livello;
  4. transizioni css3;
  5. miglioriamo l’usabilità con l’aggiunta di una freccia;

STRUTTURA

La struttura del menù è semplicissima ed è realizzata con il tag lista non ordinata e con l’inserimento delle voci di elenco. Il sottomenù va inserito in corrispondenza della voce di menù nella quale vogliamo inserire le liste di sottomenù ( 2 livello ), inserendo all’interno del tag “li” l’altra lista non ordinata ul;

STILE MENU’ 2° LIVELLO

Lo stile viene attribuito alle voci di menù differenziando le voci di menù del 1° livello da quelle del secondo, con una classe che ci permetterà di attribuire degli stili diversi. La tecnica utilizzata è di settare lo stato del menù

 #dropdown-menu li ul

con opacity=0

e nel momento in cui effettuiamo il rollhover sulla voce portfolio il sottomenù di 2° livello compare poiché in questo caso:

#dropdown-menu li:hover ul

opacity=1

STILE  MENU’ 3° LIVELLO

Il menù di 3° livello viene realizzato con la stessa tecnica del menù precedente. Lo inseriamo nel punto in cui vogliamo far comparire le voci di menù e lo differenziamo con una classe per non intaccare gli stili del menù precedente.

TRANSIZIONI

A questo punto miglioriamo il nostro menù aggiungendo gli effetti della transizione nel momento in cui passiamo il mouse sulla voce di menù nella quale abbiamo aggiunto il menù di 2° livello; le nostre transizioni saranno anche visibili sulle singole voci di menù.

MIGLIORIAMO L’USABILITA’ DEL MENU’

Sono i particolari che fanno la differenza! E allora perché non aggiungere una piccola freccia in corrispondenza della voce di menù dove visualizziamo il sottomenù a tendina?

È sufficiente sfruttare il selettore ::after del contenitore del menù ed il gioco è fatto:

#dropdown-menu::after{
content:"";
position:relative;
border-top:5px solid #3EBBA7;
border-bottom:5px solid transparent;
border-left:5px solid transparent;
border-right:5px solid transparent;
top:55px;
left:-132px;
z-index:1;

}

Ecco qui anche i codici per visualizzare ed usare il codice Html5 e Css3.
Semplice vero? Con solo codice html5 e css3 abbiamo realizzato un menù semplice, pulito ed accattivante. Ti piace? Seguimi a breve ci saranno altri video tutorial.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “MENU’ A TENDINA CON LE TRANSIZIONI CSS3”—

Nome *

Email *

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento