Uso di pseudo-elementi per realizzare un menu di navigazione con animazione in CSS3

In questo tutorial vedimo come posimo stilizzare il nostro menu con dei animazioni  utilizzando solo i CSS. Per creare l'effetto utilizzeremo pseudo-elemento:after e come contenuto del nostro pseudo elemento il nome del menu.

 

1.Markup HTML

Per il menu viene usata una tipica marcatura una lista non numerata.

<nav class="ph-lift">
            <ul>
                        <li class="active"><a href="#home" data-title="Torni a casa ">Home</a></li>
                        <li><a href="#portfolio" data-title="Ho fatto io">Miei quadri</a></li>
                        <li><a href="#about" data-title="Sei curioso?">Chi sono?</a></li>
                        <li><a href="#contact" data-title="Scrivi mi">Contatti</a></li>
            <ul>
</nav>

Potresti anche notare che per ogni collegamento realizzato con il tag <a > viene agginto attributo data-title, contenente il testo che viene mostrato durante l'animazione.

2. La idea

Menu orizontale

L'idea è di creare un elemento <li> con proprieta overflow:hidden per nascondere il nostro contenuto generato.da :afterE nella prima fase della animazione al  passagio del puntatore del mouse cambiare il colore di sfondo e aggiungere ombra interiore con una transizione graduale.

Cliccare per aprire lo spoiler e vedere il codice

nav.ph-lift ul li {
   float: left;
   height: 90px;
   line-height: 90px;
   background: white;
   overflow: hidden;
   transition: all.6s ease; }
nav.ph-lift ul li:hover {
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
     background: teal; }

E con l'aiuto di  pseudo-elemento:after generare una copia di collegamento, che viene posizionata sotto l'originale. Come contenuto della proprieta content  di un pseudo-elemento si utilizza attributo data-title.Con il passagio del puntatore di mouse (stato hover )si  cambia il valore della proprieta  top cio è il nostro testo fin ora nascosto si sposta verso sopra e vine visualizzato (con una transizione dolce).

Cliccare per aprire lo spoiler e vedere il codice

.nav.ph-lift ul li a {
      display: block;
      text-decoration: none;
      color: #007e7e;
      padding: 0 45px;
      margin-top: 0;
      transition: all.6s ease; }
 
.nav.ph-lift ul li:hover a {
      margin-top: -90px;
      color: white;
      text-shadow: 0 1px 2px  black; }
   .nav.ph-lift ul li a:after {
        content: attr(data-title);
        display: block; }
 

Semplice menu a 1 livello

 

 Menu a tendina

Nel caso del menu a tendina, non possiamo usare per l'elemento li span la proprietà overflow: hidden. Quindi, dobiamo modificare markup:

<nav class="ph-lift1">
<ul>
<li class="active"><a href="#home" data-title="Principale"><span data-title="Principale">Home</span></a></li>
<li><a href="#" ><span data-title="il migliore...">Da vedere</span></a></li>
<li><a href="#" ><span data-title="Piace di piu">Il migliori 10</span></a></li>
</ul>
<ul>
<li><a href="#portfolio" ><span data-title="Ho fatto io">Fato da me </span></a></li>
<li><a href="#" ><span data-title="Per sito">Web design</span></a></li>
<li><a href="#" ><span data-title="Disegnio">Illustrazione</span></a></li>
<li><a href="#" ><span data-title="Per lo sfondo">Template</span></a></li>
</ul>
<ul>
<li><a href="#" ><span data-title="Volete conoscermi?">Chi sono?</span></a>
<li><a href="#" ><span data-title="Contattate mi ">Contatti</span></a>
<li><a href="#" ><span data-title="Scrivetemi">Email</span></a></li>
<li><a href="#about" ><span data-title="Chiamatemi">Skype</span></a></li>
</ul>
</nav>

Menu a tendina

L'idea di base di  effetto rimane la stessa. Ora la proprietà overflow:hidden abbinata ad ellemento <a>, e  pseudo-elemento viene generata per elemento span.

nav.ph-lift1 > ul > li {
   float: left; }
nav.ph-lift1 ul li {
   height: 80px;
   line-height: 80px;
   background: white;
   transition: all.6s ease; }
   nav.ph-lift1 ul li ul {
     max-height: 0;
     -webkit-transition: all.6s ease;
     -moz-transition: all.6s ease;
     overflow: hidden;
     display: block; }
   nav.ph-lift1 ul li:hover {
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
     background: darkolivegreen; }
   nav.ph-lift1 ul li:hover ul {
     max-height: 300px; }
   nav.ph-lift1 ul li a {
     display: block;
     overflow: hidden;
     text-decoration: none;
     color: #546a2f;
     height: 80px; }
   nav.ph-lift1 ul li ul li a {
     color: #7e7e00; }
   nav.ph-lift1 ul li ul li:hover {
     background: olive; }
   nav.ph-lift1 ul li a span {
       -webkit-transition: all.6s ease;
       -moz-transition: all.6s ease;
     -o-transition: all.6s ease;
       -ms-transition: all.6s ease;
       transition: all.6s ease;
       display: block;
       padding: 0 40px; }
   nav.ph-lift1 ul li:hover > a span {
     margin-top: -80px;
     color: white;
     text-shadow: 0 1px 2px black; }
     nav.ph-lift1 ul li a span:after {
       content: attr(data-title);
       display: block; }

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