CSS3 Transition ile Animasyonlu Menü Yapımı

Bu dersimizde herkesin ilgisini çekebilecek tarzda jquery kütüphanesi ve kodları ile uğraşmadan css3 "translation" fonksiyonu ile animasyonlu menü yapacağız.

Css kodunda da inceleyeceğiniz üzere "-moz-transition: all 0.3s ease-out" değeri aşağıdaki sonucu çıkarıyor.

Ön izleme :

CSS Kodu :

.kutu { 
    width:180px; 
    height:300px; 
    background:#e2e2e2;
    float:left;
    margin: 0 0 10px 10px;
    padding:10px;
}
ul.menu {
    float:left;
    list-style: none;
    display: block;
    width: 200px;
}

li {
    margin-bottom: 5px;
}

ul.menu li a {
    -moz-transition: all 0.3s ease-out; /** Firefox **/
    -webkit-transition: all 0.3s ease-out; /** Safari and Chrome **/
    -o-transition: all 0.3s ease-out; /** Opera **/
    background: #999;
    color: #fff;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    width: 100px;
    display: block;
    text-decoration: none;
    font-weight:bold;
    font-family:Arial;
}

ul.menu li a:hover {
    background:#F2583E;
    color: #fff;
    padding-left: 27px;
}
​

HTML Kodu :

<div class="kutu">
    <h1>CSS3 Animasyonlu Menü</h1>
</div>
<ul class="menu">
    <li><a href="http://webilgibankasi.blogspot.com">Ana Sayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">SSS</a></li>
    <li><a href="#">İletişim</a></li>
</ul>