Menu realizzato con le transizioni CSS3

Oggi condivido con voi un menu, realizzato da me sfruttando le transizioni di CSS3, e che utilizza alcune icone di un pack che ho presentato qualche settimana fa: fontAwesome.

DEMO

MARKUP

Questa è la struttura del menu, è una lista di schede caratterizzate da un’icona e da un’etichetta, visibile però solo al passaggio del mouse.

 
<ul id="menu">
     <li class="item home">
           <a href="#">
                <span class="icon"><i class="icon-home icon-4x"></i></span>
                <label class="tag">Home</label>
           </a>
     </li>
     <li class="item cogs">
           <a href="#">
                <span class="icon"><i class="icon-cogs icon-4x"></i></span>
                <label class="tag">Option</label>
           </a>
     </li>
     <li class="item search">
          <a href="#">
                <span class="icon"><i class="icon-search icon-4x"></i></span>
                <label class="tag">Search</label>
           </a>
      </li>
      <li class="item rss">
            <a href="#">
                 <span class="icon"><i class="icon-rss icon-4x"></i></span>
                 <label class="tag">Feed</label>
            </a>
        </li>
</ul>
 

CSS

Lo stile è il seguente.

 
#menu
{
                  list-style: none;
                  width: 843px;
                  height: 150px;
                  margin: 100px auto;
                  padding: 0;
                  -moz-box-shadow: 0 0 5px 5px #999;
                  -webkit-box-shadow: 0 0 5px 5px #999;
                  box-shadow: 0 0 2px 2px #999;
}
#menu li
{
                  float:left;
                  width: 210px;
                  height: 100%;
                  background-color: white;
                  border-right: 1px dashed #efeeee;
                  transition-property: all; /*standard*/
                  transition-duration: 200ms;
}
#menu li:last-child
{
                  border-right: 0;
}
span.icon
{
                  display: block;
                  height: 80%;
                  width: 100%;
}
 
span.icon i
 
{
                  color:#333333;
                  display: block;
                  margin: 0 auto;
                  padding-top: 35px;
}
.icon-4x
{
                  font-size: 5em;
                  transition-property: font-size; /*standard*/
                  transition-duration: 500ms;
                  -webkit-transition-property: font-size; /*Safari e Chrome */
                  -webkit-transition-duration: 500ms;
                  -o-transition-property: font-size;      /*Opera*/
                  -o-transition-duration: 500ms;
                  -moz-transition-property: font-size;    /*Firefox*/
                  -moz-transition-duration: 500ms;
}
.tag
{
                  display: block;
                  width: 100%;
                  height: 17%;
                  text-align: center;
                  font-size: 0px;
                  transition-property: all; /*standard*/
                  transition-duration: 200ms;
                  -webkit-transition-property: all; /*Safari e Chrome */
                  -webkit-transition-duration: 200ms;
                  -o-transition-property: all;      /*Opera*/
                  -o-transition-duration: 200ms;
                  -moz-transition-property: all;    /*Firefox*/
                  -moz-transition-duration: 200ms;
}
 

Unica particolarità è quel ‘ #menu li:last-child ’: tutte le schede devono avere un bordo destro, tranne l’ultima, che deve avere bordo 0. Last-child è proprio il selettore che permette di selezionare l’ultimo elemento della lista.

In questo modo invece ho gestito il massaggio del mouse sulle schede: il colore cambia, l’icona si rimpicciolisce e l’etichetta s’ingrandisce; tutto è gestito attraverso le transizioni di CSS3.

 
#menu li.item:hover
{
                  border-right: 0;
                  position: relative;
 
}
#menu li.item:hover .icon-4x
{
                  font-size: 3em;
}
#menu li.item:hover .tag
{
                  margin-top: -20px;
                  font-size: 25px;
}
#menu li.item.home:hover
{
                  background-color: #e8432d;
 
}
#menu li.item.cogs:hover
{
                  background-color: #c1e62f;
 
}
#menu li.item.search:hover
{
                  background-color: #30a1f0;
 
}
#menu li.item.rss:hover
{
                  background-color: #f76809;
 
}