Creare un menu di navigazione animato con CSS3 in 5 minuti !

Un menu è un elemento molto importante di un sito web e non puo essere trascurato. Posiamo decorarlo per evidenziare meglio con dei colori e disegni usare dei font speciali nonché  suggerire al utente visualmente che la voce sotto il suo puntatore del mouse è attiva aggiungendo vari effetti d'animazione.  Vediamo di creare una semplice pagina html ed inserire in essa un semplice menu orizzontale. Spero che sapiate come farlo?!  E se no, prima di proseguire vi invito a consultare il nostro corso CSS pratica.

Vorrei anche sottolineare che questi effettii posiamo realizzare non solo su una semplioce pagina HTML, come per esempio un sito di rappresentanza che contiene solo una pagina oppure una landing page,  ma anche sui siti più complicati basati su  CMS tipo Joomla o WP. Basta capire  tramite i stili di template predefinito come viene realizzato menu e cambiare classi atribuendo quelli che vediamo oggi. E molto semplice basta avere un puo di abilità con linguaggio CSS. Qualche esempio ho realizzato anche io su questa pagina.

La fase numero uno è di creare la nostra pagina con menu per poter testare varie effeti.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Pagina di prova</title>
<link rel="stylesheet" href="/css/personale.css" />
<link rel="stylesheet" href="/css/stili navigazione.css" />
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Corso CSS</a></li>
            <li><a href="#">Css pratica</a></li>
            <li><a href="#">Camtasia</a></li>
            <li><a href="#">Landing-page</a></li>
        </ul>
    </nav>
</body>
</html>

Vediamo nel dettaglio la nostra struttura  html. Come avete notato ho collegato due fogli di stili uno personalizzato e altro proprio quello che contine tutti gli effetti CSS visivi che scopriremo oggi.

Dopo di che nella parte body della pagina ho realizzato una semplice lista non numerata per transformarla nel nostro menu di prova.

Nel fail personale.css ho prescritto dei stili per la mia lista e come risultato abbiamo ottenuto il menu orizzontale con lo sfondo in colore

dis1

Adesso dobbiamo aprire altro foglio di stile   “stili navigazione.css” che puoi  scaricare sotto l'articolo dove posiamo vedere un sacco di effetti di animazione realizzati in puro  CSS3 divisi per numero. Come avete penso capito è sufficiente attribuire stili del effetto scelto ad una voce del menu per poter provarlo e vedere come funziona

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.cl-effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}
.cl-effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}
.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

A questo punto vediamo di realizzare in pratica per esempio il primo effetto. Vediamo markup del nostro menu in  HTML con lo stlile scelto per animzione

<ul>
            <li class="cl-effect-1"><a href="#">Corso CSS</a></li>
            <li><a href="#">Css pratica</a></li>
            <li><a href="#">Camtasia</a></li>
            <li><a href="#">Landing-page</a></li>
        </ul>

Come avete notato ho aggiunto semplicemente al mio primo tag li la classe  .cl-effect-1 per realizzare primo effetto
 Vediamo il risultato:

Alla fine del articolo potrete scaricare la nostra pagina di prova con rispettivi stili non che vi darò un link dovete potrete vedere e provare tutti effetti da questo foglio di stile precompilato in vivo.

Passando al secondo effetto posiamo notare che  e un puo piu complicato perché entra in gioco la proprietà “data-hover”

Vediamo il significato di questa proprietà. Come si possa capire dal nome di questo attributo e un pseudo elemento e dalla prima parola posiamo capire che introduce non  semplice cambiamento del colore ma permette come nel nostro caso mostrare allo stato hover  una scritta per esempio “Ecco mi!”!
<data-hover="Ecco mi!"> 

Vediamo di fare una prova con il titolo h1 prima( perché tutti questi effetti che vediamo oggi posiamo utilizzare anche per qualsiasi elemento della nostra pagina)

<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }<!--far sparire il titolo originale al passaggio del puntatore-->
 
h1:hover:after {
    content: attr(data-hover);
    color: black;
    position: absolute;
    left: 0;
}<!-- e dopo di che (proprietà :afte) far apparire contenuto del elemento data-hover -->
</style><h1 data-hover="Ecco mi!">Ciao mondo</h1>
    <nav>
        <ul>
            <li class="cl-effect-1"><a href="#">Corso CSS</a></li>
            <li ><a  href="#">Css pratica</a></li>
            <li><a href="#">Camtasia</a></li>
            <li><a href="#">Landing-page</a></li>
        </ul>
    </nav>
</body>
</html>

Ciao mondo!

Andando piu avanti nel capire il funzionamento del secondo effetto scopriamo che dobbiamo inserire il tag <span> per utilizare la nostra proprieta data-hover ed inserirci il nostro nuovo slogan data-hover="Ecco mi! E non dimentichiamo di attribuire stile del 2 effetto alla seconda voce del menu “CSS pratica”cio è al tag li , cosi avremo:

<ul>
            <li class="cl-effect-1"><a href="#">Corso CSS</a></li>
            <li class="cl-effect-2"><a  href="#"><span data-hover="Ecco mi!>Css pratica</span></a></li>
            <li><a href="#">Camtasia</a></li>
            <li><a href="#">Landing-page</a></li>
    </ul>

Css pratica

Vediamo un puo come funziona questo effetto. Vediamo la pseudo classe :before perché gli altri li forse conoscete gia. Quindi come si possa indovinare questa pseudo classe fa qualche mossa prima del evento e nel nostro caso prepara la visualizzazione del contenuto del  nostro data-hover. E al passaggio del puntatore fa sparire la scritta iniziale e mostra quello che cera sotto, posiamo dire che abbiamo tolto il coperchio ma il contenuto c'era gia  creato con il nostro  pseudo elemento : before!

E con altre proprieta CSS abbiamo realizzato l'effetto 3d di rotazione.

A questo punto vediamo velocemente il resto dei effetti d'animazione che posiamo aplicare alle vari evoci del menu  
Come avete capito basterebbe aggiungere l 'effetto voluto tramite la rispettiva classe css dal foglio di stile che potete scaricare qui sotto .  
L'effeti 6, 7, 8, 9 sono semplici da realizzare vediamo il codice del nostro menu

<nav >
  <ul>
    <li class="cl-effect-6"><a href="/index.html" >Basic</a></li>
    <li class="cl-effect-7"><a href="/overlay.html">Overlay</a></li>
    <li class="cl-effect-8"><a href="/link.html">Link</a></li>
    <li class="cl-effect-9"><a href="/link.html">Link</a></li>
    <li class="cl-effect-10"><a data-hover="ioeweb" href="/link.html"><span>Link</span></a></li>
  </ul>
</nav>

e nel effetto numero 10 abbimo usato  il tag <span > e la proprietà data-hover="ioeweb" nel tag <a>.

Andiamo avanti e vedimo altri 5 effetti per il nostro menu di navigazione.

<nav >
  <ul>
         <li class="cl-effect-11"><a  data-hover="Basic"href="index.html" >Basic</a></li>
          <li class="cl-effect-12"><a href="/overlay.html">Overlay</a></li>
          <li class="cl-effect-13"><a href="/link.html">Link</a></li>
    <li class="cl-effect-14"><a href="/link.html">Link</a></li>
    <li class="cl-effect-15"><a data-hover=" link"href="link.html">Link</a></li>
  </ul>
</nav>

nel effetto numero 11 è stato usato attributo data-hover ma a differenza dai esempi precedenti qui la scritta non sparisce  ma viene ricoperta da una uguale con colore diverso per cio per questo effetto dobbiamo usare la stessa parola del menu. Effetti 12,14 semplici, e nella animazione numero 13 vediamo che appaiono dei puntini sotto la voce del menu, essi vengono moltiplicati da un solo punto che posiamo sostituire con qualcosa diverso direttamente nel foglio di stile CSS vediamo dove:

dis1 effettiAnimazione

e nel esempio 15 di nuovo vediamo attributo data-hover con la stessa parola o nome del menu che cambia solo il colore

Vorrei subito precisare che per avere un menu di navigazione omogeneo con la stessa animazione per tutti i voci del menu la classe della animazione scelta dobbiamo prescrivere per il blocco intero di navigazione nel nostro caso tag <nav> sara per esempio <nav class="cl-effect-11"> e non come ho fatto vedere io nei miei esempi che attribuisco ad ogni voce nel nostro caso tag <li> una singola animazione.

Vediamo altri, subito il codice della nostra navigazione

<nav >
  <ul class="csstransforms3d">
    <li class="cl-effect-16"><a  data-hover="Basic"href="index.html" >Basic</a></li>
    <li class="cl-effect-17"><a href="/overlay.html">Overlay</a></li>
    <li class="cl-effect-18"><a href="/link.html">Link</a></li>
    <li class="cl-effect-19"><a href="/link.html" ><span data-hover="effetto19">Link</span></a></li>
    <li class="cl-effect-20"><a href="/link.html"><span data-hover="Link">Link</span></a></li>
    <li class="cl-effect-21"><a href="/link.html">Link</a></li>
  </ul>
</nav>

Effeti di animazione 17 e 18 e 21 sono semplici da introdurre sul codice html dell apagina  e  nell'effetto 16 abbiamo gia visto una cosa simile, quindi salto e passiamo ad animazione 19, come avete notato ho inserito una classe nel tag <ul> proprio per realizzare effetto 3D numero 19 , puoi usiamo il solito tag <span> con la proprietà data-hover al suo interno con la scritta voluta (nel mio caso effetto19) ovvio che posiamo cambiare colori e grandezza dei caratteri non che altri proprietà delle nostre voce del menu. E nell'effetto numero 20 il solito data-hover inserito nel tag <span>

Quindi provate di usare queste animazioni di CSS3 adattate gli stili al vostro sito e rendete il vostro menu piu affascinante e insolito.

Ciao e alla prosima

Letto 1764 volte