Inca un exemplu de meniu animat cu CSS3

Un alt exemplu ce ofera CSS3 şi tranziţii pentru a crea meniuri animate.
Pentru a crea un un meniu animat in acest stil (vezi un exemplu aici) mergem la Desing -> Editati HTML si cautam linia </head> si exect deasupra ei se va adauga datele de mai jos:

<style type="text/css">
#menucircle { margin-left:50px; }
a.menucircle {
background-image: -moz-linear-gradient(100% 100% 90deg, #ABC, #456);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ABC), to(#456));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF445566', EndColorStr='#FFAABBCC');
background-color: #000;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
border-radius: 10px;
color: #FFF !important;
display: block;
float:left;
font-family: Helvetica;
font-size:30px;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
margin: 0 10px;
width: 150px;
}
a.menucircle:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transition-duration: .4s;
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .4s;
background-image: -moz-linear-gradient(100% 100% 90deg, #DEF, #567);
background-image: -webkit-gradient(linear, left bottom, left top, from(#DEF), to(#567));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF556677', EndColorStr='#FFDDEEFF');
color: #FF0;
}
</style>

ultimul pas deschide un nou vidget HTML/Javascript si adauga urmatorul cod:

<div id="menucircle">
<a class="menucircle" href="url_link">TEXT 1</a>
<a class="menucircle" href="url_link">TEXT 2</a>
<a class="menucircle" href="url_link">TEXT 3</a>
<!-- alte link-uri -->
</div>