Animasyonlu CSS Menu

Dikey CSS Menü Örneği

Arkaplanda gif animasyonlu resim

Küçük boyut.

 Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.

                
<div class="outer">
<div class="menu">
    <ul>
        <li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
        <li><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
        <li><a href="http://www.cssornekleri.com">Hizmetler</a></li>
        <li><a href="http://www.cssornekleri.com">İletişim</a></li>
    </ul>
</div>
</div>
         

 
         
 
 

#b18211;}
 
Animasyonlu CSS Menu
 
 
Arka planda hareketli gif animasyon kullanılmış dikey css menü örneği.
Dikey CSS Menü Örneği
Arkaplanda gif animasyonlu resim
Küçük boyut.




Örnek Görünüm:





    
Ana Sayfa
    
Hakkımızda
    
Hizmetler
    
İletişim




 Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz. 
HTML Kodu


<div class="outer">
<div class="menu">
    <ul>
        <li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
        <li><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
        <li><a href="http://www.cssornekleri.com">Hizmetler</a></li>
        <li><a href="http://www.cssornekleri.com">İletişim</a></li>
    </ul>
</div>
</div>
CSS Kodu


                

 
.outer a, .outer div, .outer li, .outer ul{
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
div.menu{
    width: 193px;
}
div.menu ul{
    list-style: none;
    text-indent: 0px;
}
div.menu li{
    margin-top: 3px;
}
div.menu a{
    font: 12px Verdana;
    padding: 4px;
    color: #646464;
    display:block;
    padding: 6px 30px;
    height: 20px;
    text-decoration: none;
    background: url('images/background.gif');
}
div.menu a:hover{
    background: url('images/highlight.gif') no-repeat right;
    padding: 6px 40px;
}:148px;background:url(images/nav_active.jpg) no-repeat;color:#b18211;}
 
                
 
.outer a, .outer div, .outer li, .outer ul{

    margin: 0;

    padding: 0;

    font-family: Verdana, Helvetica, Arial, sans-serif;

}

div.menu{

    width: 193px;

}

div.menu ul{

    list-style: none;

    text-indent: 0px;

}

div.menu li{

    margin-top: 3px;

}

div.menu a{

    font: 12px Verdana;

    padding: 4px;

    color: #646464;

    display:block;

    padding: 6px 30px;

    height: 20px;

    text-decoration: none;

    background: url('images/background.gif');

}

div.menu a:hover{

    background: url('images/highlight.gif') no-repeat right;

    padding: 6px 40px;

}:148px;background:url(images/nav_active.jpg) no-repeat;color: