Come realizzare un dropdown menù con le transizioni Css3

Come realizzare un dropdown menù con le transizioni Css3

Dopo il grande successo del video “Come realizzare un menù a tendina con le transizioni Css3” in termini di visualizzazioni che però ha creato non pochi problemi, sia per la visualizzazione che per il montaggio ( chiedo ancora scusa ma ero alle prime esperienze in termini di video-tutorial) ho deciso di riscriverlo modificandolo leggermente il codice e creandone una versione responsive ( che vedremo nel prossimo video tutorial ).

Nella prima parte, con la creazione del menù da desktop ho realizzato l’esempio sempre senza Jquery con le soli transizioni css.
Nella seconda parte invece, ho utilizzato il plug-in Jquery Pushy.js con la quale ho realizzato un menù responsive che viene attivato con un pulsante lateralmente con un’animazione che crea uno spostamento da sinistra verso destra.

PARTE PRIMA – STRUTTURA HTML DEL MENU’

Il nostro file di partenza è così composto:
– collegamento al file di stile con la quale modificheremo lo stile del menù;
– collegamento a icomoon per aggiungere le icone nel menù;

Cominciamo a scrivere il codice html e poi lo stile:

<ul class="nav-lista">
     <li class="dif"><a class="icon-office" href="#"> HOME</a></li>
    <li class="dif"><a class="icon-user" href="#"> CHI SONO</a></li>
    <li class="dif"><a class="icon-folder-open" href="#"> PORTFOLIO</a>
         <ul>
             <li><a href="#">Grafica</a></li>
            <li class="freccia"><a href="#">Web design</a>
                 <ul class="second_level">
                     <li><a href="#">Siti Statici</a></li>
                    <li><a href="#">Siti Dinamici</a></li>
                    <li><a href="#">Responsive WD</a></li>
                </ul>
            </li>
            <li><a href="#">Stampa</a></li>
        </ul>
    </li> 
    <li class="dif"><a class="icon-spinner" href="#"> DOVE SONO</a></li>
    <li class="dif"><a class="icon-location" href="#"> CONTATTAMI</a></li>
</ul>

La voce di menù con sottolivelli avrà uno stile differente dalle altre voci proprio perché si comportano diversamente. Le altre voci avranno la classe “dif”.

PARTE SECONDA – STILE DEL MENU’

In primo luogo aggiungiamo lo stile per il tag nav-lista che conterrà la lista di voci

.nav-lista{
width:100%;
list-style-type:none;
height:50px;
margin:0;
padding:0;
background:#3EBBA7;
border-top:5px solid #349E8D;
}

.nav-lista li{
    text-align:left;
    font-family: 'Open Sans', sans-serif;
}

– La seconda cosa da fare è nascondere le voci di menù di secondo livello che si visualizzeranno al mouse hover della voce principale

.nav-lista li ul{
opacity:0;
position: relative; 
left:0;
list-style-type: none; 
padding: 0; 
margin: 0;    
-webkit-transition: all 0.2s;
}
.nav-lista li:hover { background-position: 0 -40px; background:#349E8D}
.nav-lista li a{
    color:#fff;
    text-decoration:none;
    padding:10px;
    -webkit-transition: all 0.2s;
}
.nav-lista li a:hover{
    color:#CC3;
    text-decoration:none;
}

– Terza cosa da fare è tornare nella pagina html e dare una classe diversa alle voci di menù che non hanno un sottolivello, in modo da differenziare lo stile perché sarà diverso; infatti posizioneremo le voci di primo livello in modo orizzontale

.nav-lista li.dif{
    float:left;
    background:#3EBBA7;
    padding:0 10px;
    line-height:50px;
    -webkit-transition:ease-out 0.2s;
    border-right:1px solid #fff;
    text-align:center;
    font-family: 'Open Sans', sans-serif;    
}

PARTE TERZA – STILE PER VOCI DI MENU’ DI SECONDO LIVELLO

- /*stile per le voci di menù di primo e secondo livello */

.nav-lista li:hover { background-position: 0 -40px; background:#349E8D}
.nav-lista li a{
    color:#fff;
    text-decoration:none;
    padding:10px;
    -webkit-transition: all 0.2s;
}

.nav-lista li a:hover{
    color:#CC3;
    text-decoration:none;
}

– Rendiamo visibili le voci di secondo livello con il mouse hover

.nav-lista li:hover ul { opacity: 1; }

– Eliminiamo quello spazio creato dalle voci di secondo livello

.nav-lista li ul li { float: none; position: static; height: 0; line-height: 0; background: none;-webkit-transition: height 0.5s; }

– Creiamo lo stile per le voci di secondo livello, aggiungendo l’altezza, padding ecc

.nav-lista li:hover ul li {height: 37px; line-height: 35px;padding:0;margin:0 }

– Adesso sistemiamo lo stile per il menù di secondo livello della voce Web Design.
Innanzitutto nascondiamo le voci per attivarle al mouse hover.

.nav-lista li ul li ul.second_level{
opacity:0;    
position: relative; 
width:10em;
left: 170px; 
top:-35px;
background: #3EBBA7; 
list-style-type: none; 
padding: 0; 
margin: 0;    
-webkit-transition: all 0.2s;
}

Rendiamole visibili quando passiamo il mouse sulla voce web design:

.nav-lista li ul li:hover ul.second_level{
opacity:1;    
}

PARTE QUARTA – INSERIAMO LE FRECCE COME SEGNAPOSTO PER INDICARE CHE C’E’ UN MENU’ DI SEC LIV

.nav-lista li.dif a.icon-folder-open::after{
content: "";
    position: absolute;
    border-top: 5px solid #3EBBA7;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    z-index: 1;
    margin-top: 50px;
    margin-left: -52px;
}

stile per l’hover

.nav-lista li.dif:hover a.icon-folder-open::after{
content:"";
border-top:5px solid #349E8D;
border-bottom:5px solid transparent;
border-left:5px solid transparent;
border-right:5px solid transparent;
}

Adesso inseriamolo per la voce web design

.nav-lista li.freccia::after{
content: "";
    position: absolute;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
    border-right: 5px solid transparent;
    z-index: 1;
    right:0;
    top:50px
}

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 “DROPDOWN MENU’ CON LE TRANSIZIONI CS33”—

Name *

Email *

alederobertis75
info@alessandraderobertis.it
No Comments

Post A Comment