Tutorial - Menus Wishlist

Yoo ~~

Trouxe um tutorial de menus Wishlist ! Todos são muito legais, e eu recomendo !

Visualize aqui ><

Gostou, quer aprender ? Então vamos lá !

Enjoy ~~

Todos os códigos devem ser colocados acima de 

]]></b:skin>

Menu 1 !

.menu {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626;

text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;

padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-left:3px solid #fee152;}

.menu:hover { border-left:12px solid #fee152; }

.menu a { color: #262626; }

Crie uma gadget e cole :

<div class=menu><a href="link" >exemplo 01</a></div>

Menu 2 ! 

.menu2 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626;

text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;

padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:12px solid #fee152; border-left:12px solid #fee152; }

.menu2:hover { border-right:2px solid #fee152; border-left:2px solid #fee152; }

.menu2 a { color: #262626; }

Crie uma gadget e cole :

<div class="menu2"><a href="link" >exemplo 02</a></div>

Menu 3 ! 

.menu3 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626;

text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; 

padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:12px solid #fee152; border-left:12px solid #fee152; }

.menu3:hover { border-right:2px solid #fee152; border-left:2px solid #fee152; }

.menu3 a { color: #262626; }

Crie uma gadgte e cole :

<div class="menu3"><a href="link" >exemplo 03</a></div> 

Menu 4 !

.menu4 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:4px solid #fee152; border-left:4px solid #fee152; } 

.menu4:hover { border-right:17px solid #fee152; border-left:17px solid #fee152; } 

.menu4 a { color: #262626; }

Crie uma gadget e cole :

<div class="menu4"><a href="link" >exemplo 04</a></div>

Menu 5 !

.menu5 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:15px solid #fee152; border-left:4px solid #fee152; } 

.menu5:hover { border-right:4px solid #fee152; border-left:15px solid #fee152; } 

.menu5 a { color: #262626; }

Crie uma gadget e cole : 

<div class="menu5"><a href="link" >exemplo 05</a></div>

Menu 6 !

.menu6 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; padding:2px 0px 2px 10px; opacity: 1;margin-bottom:15px; border-right:4px solid #fee152; border-left:4px solid #fee152; } 

.menu6:hover { border-right:4px solid #fee152; border-left:15px solid #fee152; } 

.menu6 a { color: #262626; }

Crie uma gadget e cole :

 <div class="menu6"><a href="link" >exemplo 06</a></div>