Pannello superiore a scomparsa in puro CSS

Sicuramente che hai  spesso incontrato, pannelli a scomparsa di vario tipo e posizione, per esempio in alto, in basso, a sinistra o a destra che escono in automatico, con un intervallo di tempo predeterminato, o vengono attivato al clic. Di solito, in questi pannelli vengono nascosti inizialmente da occhi degli utenti ogni tipo di  informazione che sono importanti o meno.

Come ad esempio i moduli di sottoscrizione, bottoni dei social, link, recapiti, ecc, ecc, insomma, di tutto.

Ci sono un sacco di soluzioni di implementazione di tali pannelli già pronte in JavaScript, attraverso moduli e plugin per diversi CMS ,  ma  ci sono anche quelli realizzati  in puro css e completamente funzionanti.

Quindi oggi come hai capito vediamo di realizzare un panello del genere che scende al clic dalla parte superiore della finestra in puro CSS.

Vediamo subito markup html del nostro panello

Il pannello è costituito da tre elementi fondamentali: un contenitore di base, il blocco del  contenuto e bottone  di apertura / chiusura.

<input class="open" id="top-box" type="checkbox" hidden>
<label class="btn" for="top-box"></label>
<div class="top-panel">
   <div class="message">
       Qui metiamo il contenuto.....
   </div>
</div>

Come si può vedere nel markup del panello è presente checkbox  type="checkbox"  che inizialmente  è nascosto e inattivo. Con aiuto del tag   <label>, che è presente in forma del bottone fatto in css, si stabilisce la connessione con il checkbox , vale a dire, se si fa clic sul label, si innesca input (diventa attivo). E con l'aiuto di pseudo-classe :checked  di css stabiliamo un collegamento tra il checkbox nascosto e il nostro panello.

Vorrei subito precisare che  il pulsante di apertura / chiusura non è legato al pannello ma viene posizionato relativamente rispetto al contenitore principale del contenuto della pagina <div class="container">  e al attivazione del nostro panello scorrevole, blocco con il contenuto e il bottone vengono spinti verso basso per una distanza corrispondente all'altezza del pannello.

Stili CSS3 del panello a scomparsa

Ora, cerchiamo di formare gli stili del nostro pannello scorrevole, tanto per cominciare, impostiamo le dimensioni di base del contenitore, definiamo colore di sfondo e la sua posizione originale. In CSS, creiamo classe.top-panel  dove saranno prescrite tutte le proprietà css necessarie.

Il nostro panello è a scomparsa e quindi abbiamo bisogno di nasconderlo, che è molto facile da realizzare. Impostiamo posizionamento fisso position: fixed; estendendo il nostro panello a tutta la larghezza della  pagina width: 100%; e l'altezza (height: ) non indichiamo, in questo caso, il pannello si regolerà automaticamente in corrispondenza al contenuto, e con la trasformazione transform: translateY(-100%);  nascondiamo il nostro panello sopra il bordo superiore  della pagina.

.top-panel {
    background: #39464e;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

Il blocco con il contenuto si trova all'interno del blocco base, e ad esso asegniaremo la classe class="message",e gia per questa classe indicheremo tutti gli stili css che riguarderano il nostro contenuto inserito nel panello il colore e la famiglia di font, dimensioni delle immagini, ecc ...

Ovviamente si può tranquillamente fare a meno di questo blocco aggiuntivo, inserendo il contenuto direttamente nel blocco base, ma facendo cosi perdiamo la flessibilità nella gestione e decorazione dl nostro contenuto del pannello.

Il nostro contenuto per esempio nella forma di un messaggio è allineato rigorosamente al centro e si estende su una predeterminata larghezza max-width: 980px;, un valore casuale, potrai sempre inserire uno diverso.

/* il blocco del contenuto */
.message {
    color: #fff;
    font-weight: 300;
    position: relative;
    padding: 2em;
    margin: 0 auto;
    max-width: 980px
}
/* titolo del  1 livello */
.message h1 {
    color: #fff
}
/* titolo del  2 livello */
.message h2 {
    color: #888
}

Successivamente, definiamo tutti gli stili necessari per il nostro bottone del pannello. Inizialmente  nascondiamo type = "checkbox" non inventando niente, nel tag HTML <input> prescriveremo attributo hidden , che determina se visualizzare l'oggetto nella finestra del browser oppure no.

<input class="open" id="top-box" type="checkbox" hidden>

Con i CSS nasconderemo il checkbox  nel seguente modo:

.open {
   position: absolute;
   clip: rect(0 0 0 0);
   opacity: 0;
}

Al tag <label> assegnare class="btn" , che in seguito posiamo gestire tramite i css, per poter "disegnare", un interruttore (pulsante) abbastanza simpatico:

/* Interruttore del panello */
label.btn {
    display: block;
    position: absolute;
    right: 25px;
    top: 100%;
    /*bottom: -35px;*/
    cursor: pointer;
    background: #2bbbad;
    border-radius: 0 0 3px 3px;
    padding: 8px 16px;
    color: #fff;
    font-size: 100%;
    line-height: 1em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 9999
}
 
/* Interruttore al hover */
label.btn:hover {
    -webkit-transition: 0.35s;
    -moz-transition: 0.35s;
    transition: 0.35s;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}
 
/* La freccia verso sotto */
label.btn:after {
    content: '\f078';
    font: normal 18px/1 FontAwesome;
    text-decoration: inherit
}

Le frecce del bottone sono presi dal pacchetto di FontAwesome e quindi questo font deve essere collegato alla vostra pagina  :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

È possibile utilizzare un altro simbolo per l'interruttore, ad esempio, il testo o il simbolo HTML appropriato.
Per default abiamo previsto tre stati per l'interruttore quando il panello è chiuso - freccia verso basso,  a pannello aperto - freccia verso alto e naturalmente al effetto hover, al passaggio del mouse.

Attivare il nostro pannello e cambiare lo stato dell'interruttore faremo tramite pseudo-classe:checked.

Con la proprietà box-shadow  aggiungeremo una leggera ombra al  bordo del panello, e con la proprieta transition ho creato un semplice effetto di passaggio fra due stati del panello quello chiuso e quello aperto.

.open:checked ~ .top-panel {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.35s;
    -moz-transition: 0.35s;
    transition: 0.35s
}
 
.open:not(:checked) ~ .top-panel {
    -webkit-transition: 0.35s;
    -moz-transition: 0.35s;
    transition: 0.35s
}
/* Colore del interruttore al clic */
 
.open:checked ~ .top-panel > label.btn {
    background: #dd6149
}
/* Freccia del interruttore verso alto */
 
.open:checked ~ .top-panel > label.btn:after {
    content: '\f077';
    font: normal 18px/1 FontAwesome
}

Per modificare le dimensioni dei carattere durante la visualizzazione della pagina su diversi dispositivi, utilizzeremo  media query @media.

@media only screen and (max-width: 400px) {
    body {
        font-size: 90%
    }
}
 
@media only screen and (max-width: 800px) {
    body {
        font-size: 100%
    }
}
 
@media only screen and (min-width: 1100px) {
    body {
        font-size: 120%
    }
}

A questo punto direi che è tutto ! Pannello superiore a scomparsa  è pronto per l'uso, ora puoi inserire in esso quello che vuoi.  Potrai scaricare l'archivio della sorgente, qui sotto. 

Letto 302 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