Menu verticale nel panello laterale a scomparsa in puro CSS

Menu laterale a scomparsa che esche dopo il clic è molto utilizzato in vari siti web.  Perche risparmia lo spazio e facilita la lettura del contenuto della nostra pagina web e se invece vorrei passare su un altra pagina basta aprire pannello nascosto e cliccare voce del menu interesata. Particolarmete e utile su dispositivi piccoli per ovio motivo.

Sicuramente ognuno di voi, almeno una volta ha visto una cosa del genere in qualche sito sulla destra o sulla sinistra e hai visto bottone come questo: ☰, quando si fa clic su di esso, esce un panello che contiene un menu di navigazione a tendina.

Come creare un menu a tendina inserito nel panello laterale che scompare in puro CSS

Ci sono molte soluzioni gia pronte per la realizzazione di tali pannelli con l'aiuto di jQuery o singoli plug-in, moduli per per varii CMS  come per esempio Joomla o WP
Okey, ma ci sono anche le soluzioni molto piu semplici, creati interamente in  CSS.  E oggi vediamo una di queste soluzioni

Vediamo subito l'esempio del menu laterale a scomparsa in puro CSS.

E dopo aver visto quello che realizzeremo oggi passiamo al codice e prima di tutto dobbiamo capire come funzionerà l'uscita del nostro menu laterale a scomparsa.
Per far uscire il nostro panello utilizzeremo checkbox e i suoi due stati selezionato e no, vediamo il codice

<input type="checkbox" id="nav-toggle" hidden>

Posizioniamo il nostro checkbox  nella parte superiore della pagina, sarebbe  meglio subito dopo il tag <body>. Assegniamo attributo hidden indicando che subito dal inizio  l'elemento deve essere nascosto e assegniamo ad esso un identificatore  id="nav-toggle" , per esempio, per  collegare l'elemento in seguito al atributo for del tag  <label>, che utilizzeremo come bottone interruttore per il nostro panello continente menu .

Come  involucro del nostro panello  laterale utilizzeremo  tag <nav> con la classe class = "nav".

All'interno del contenitore di base inseriremo il nostro menu verticale o potete inserire anche qualche altro contenuto.

In primo luogo prescriveremo etichetta  (tag <label>) in seguito decorata coi css assumera la  forma del  "bottone- hamburger" che collegheremo al checkbox nascosto. Per fare questo è importante di indicare il nome del attributo for uguale al id del checkbox . Attributo vuoto per onclick usiamo per correggere problemi con  iOS 6.0.

<label for="nav-toggle" class="nav-toggle" onclick></label>

Potresti inserire un titolo per il menu o un logo del tuo sito sopra nel panello a scomparsa perche è prevista  nel esempio anche questa possibilità:

<h2 class="logo"> 
    <a href="//ioeweb.it/">ioeweb.it</a> 
</h2>

Dopo di che dal momento che abbiamo deciso che stiamo facendo nel nostro panello a scomparsa  il menu di navigazione, dovremo creare una lista non ordinata <ul>,  a sette voci come esempio, che naturalmente possono essere anche di piu

<ul>
   <li><a href="#1">Uno </a>
   <li><a href="#2">Due</a>
   <li><a href="#3">Tre</a>
   <li><a href="#4">Quattro</a>
   <li><a href="#5">Cinque</a>
   <li><a href="#6">Sei</a>
   <li><a href="#7">Sete</a> 
</ul>

A questo punto abbiamo finito di scrivere il markup del nostro menu laterale a scomparsa. Tuttavia, posiamo agiungere un altro trucco, oscurare il resto della pagina al uscita del panello. Se ne hai bisogno, basta sotto la lista del menu, o in qualsiasi altro luogo della pagina aggiungere un div contenitore con una certa classe:

<div class="mask-content"></div>

Nella demo questa funzione è stata commentata escludendo dalla visualizzazione, se avrai bisogno  potrai trovarla facilmente e quindi togliendo il commento abilitarla.

Ho cercato di aggiungere tanti comenti nel codice per facilitare la sua comprensione.

Quindi, tutti gli elementi necessari a posto, rimangono i più importanti e interessanti, formare l'aspetto, il colore, la forma, e agiungere movimento al  nostro menu. Tutto questo lo faremo esclusivamente con i CSS. Nessun  javascript.

Stili CSS del pannello autouscente.

Spiegare ogni regola e la proprietà non vedo il motivo, dato che l'ho fatto direttamente nel codice CSS.
Stili di pannelli situati a sinistra o a destra sono quasi identiche, sono diversi soltanto da un paio di valori. Nel'archivio della sorgente ci sono entrambe le versioni in singoli file, in modo che potrai scegliere quello che vuoi, importante di collegare gli stili correttamente al documento

Qui sotto vediamo i stili css per il nostro pannello laterale a scomparsa con il menu :

Cliccare per vedere il codice

/**
 * Panello latearle autouscente con navigazione
 * che esce al clic da sinistra
 */
 
.nav {
    /*  largezza libera, potrai sperimentare */
    width: 320px;
    min-width: 320px;
    /* fissiamo e indichiamo l'altezza massima  */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* spostiamo(nascondiamo)il pannello rispetto bordo sinistro della pagina  */
    left: -320px;
    /* spazzi interni */
    padding: 15px 20px;
    /* regoliamo la uscita del panello  */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* indichiamo il colore dello sfondo del panello */
    background: #16a085;
    /* indichiamo che sara sopra tutti gli altri elementi della pagina  */
    z-index: 2000;
}
 
/**
 * Bottone interruttore del pannello 
 * tag <label>
 */
 
.nav-toggle {
    /* posizionamento assoluto*/
    position: absolute;
    /* rispetto bordo sinistro del pannello  */
    left: 320px;
    /* rispetto bordo superiore  */
    top: 1em;
    /* spazzi interni  */
    padding: 0.5em;
    /* indichiamo il colore dello sfondo del interruttore
     * di solito corrisponde al colore del pannello 
    */
    background: inherit;
    /* colore del testo */
    color: #dadada;
    /* tipo del cursore */
    cursor: pointer;
    /* altezza del font */
    font-size: 1.2em;
    line-height: 1;
    /* sempre in prima vista rispetto altri elementi della pagina  */
    z-index: 2001;
    /* animazione del colore del testo al hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}
 
/* identifichiamo il teso del bottone interruttore 
 * simbolo Unicode (TRIGRAM FOR HEAVEN)
*/
 
.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}
 
/* colore del testo al hover  */
 
.nav-toggle:hover {
    color: #f4f4f4;
}
 
/**
 * Checkbox nascosto
 * invisibile e inaccessibile  :)
 * nome del selettore del attributo del checkbox
 */
 
[id='nav-toggle'] {
    position: absolute;
    display: none;
}
 
/**
 * cambiamento della posizione del iterruttore  
 * in caso di dispositivi mobili
 * quando pannello aperto si trova al interno del pannello */
 
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}
 
/**
 * Quando checkbox selezionato, aprire pannello 
 * usiamo pseudo-classe :checked
 */
 
[id='nav-toggle']:checked ~ .nav {
    left: 0;
    box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}
 
/* 
 * spostamento del contenuto della pagina 
 * per largezza del pannelo ,
 * non è obbligatorio il trucco, ma puoi sempre usarlo
*/
 
[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    transform: translateX(320px);
}
 
/*
 * cambio del simbolo del bottone interruttore ,
 * solita croce  (MULTIPLICATION X), 
 * potrai utilizare qualsiasi altro simbolo
*/
 
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}
 
/**
 * prefissi per Android <= 4.1.2
 * 
 */
 
body {
    -webkit-animation: bugfix infinite 1s;
}
 
@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}
 
/**
 * per dispositivi medie e piccoli
 */
 
@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}
 
@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}
 
/**
 * Definiamo lo stile del titolo(logo) del panello  
*/
 
.nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
 
.nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
}
 
 
/*Uscita morbida del titolo(logo) al apertura del panello  */
 
[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}
 
/**
 * Decoriamo il menu 
 * usando la lista non numerata per le voci
 * aggiungiamo passaggi morbidi e trasformazioni 
 */
 
.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.nav > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}
 
[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
 
/* impostiamo intervalli di apparizone dei voci del menu  */
 
.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}
 
.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}
 
.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}
 
.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}
 
.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}
 
.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}
 
 
/**
 * decoriamo link delle voci del menu 
 */
 
.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #dadada;
    width: 100%;
    text-decoration: none;
    /* passagio morbido */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}
 
/**
 * stato dei link al passaggio del mouse
 */
 
.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}
 
/**
 * sottolineatura dei link del menu
 */
 
.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}
 
.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
/**
 * animazione della  linea di sottolineatura al hover 
 */
 
.nav > ul > li > a:hover:before {
    width: 0%;
    background: #3bc1a0;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}
 
/* lo sfondo oscurante della pagina  
 * in questo caso ellementi vengono blocati */
 
/*
.mask-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}
 
[id='nav-toggle']:checked ~ .mask-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}
*/

Come puoi capire, quasi tutti i valori delle proprietà CSS sono facoltative, vale a dire, che puoi facilmente cambiare il pannello e tutti i suoi elementi al tuo gusto e  le spiegazioni, spero, ti aiuteranno in questo. Vorrei anche sottolineare che si deve verificare il coretto funzionamento nel tuo progetto e che non si sono creati dei conflitti.

In conclusione vorrei anche dire che noi oggi abbiamo inserito nel panello un menu ma potrai inserire in esso anche altri elementi del sito. Nelle prossime giorni vedo di scrivere un articolo per utilizzo del pannelloa scomparsa  per altri scopi.

 

Letto 3360 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso