Menubar Animation Effect In CSS – Aptana Studio 3 Turkish Tutorial

** In this Aptana Studio 3 Turkish Tutorial, I will show you make menubar animation effect with CSS. Each site has a different menu structure in web site designs. You will find some practical information on this video.**

Aptana Studio 3 programın da bugün menübarlarınızda kullanabileceğiniz kolay ve güzel bir animasyon yapımını göstereceğim. Her site farklı animasyon ve tarzda menü kullandığı için çok fazla animasyona ihtiyaç duyulmaktadır. Bunlardan birkısmını fırsat buldukça gösterceğim.

Source

** Farklı bir yöntem izleyerek tek sayfada sizlere animasyonun kodlarını gösterdim. Dilerseniz gerekli yerlerden kopyalayıp blog yada sitelerinize uygulayabilirsiniz. Hadi videoya başlayalım.**

MENUBAR EFFECT

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{ background-image: url(arka.jpg); margin: 0px; position:absolute;}
div#menubar1{
    padding: 24px;
    border: #999 1px dashed;

}
div#menubar1 > a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    background: #333;
    padding: 12px 24px;
    color: #999;
    margin-left: 10px;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover
{
    background: #6f8a00;
    color: #fff;
}           
        </style>
    </head>
    
    <body background="arka.jpeg">
        
        <div id="menubar1">
            <a href="#">HOME</a>
            <a href="#">SUPPORT</a>
            <a href="#">ABOUT</a>
            <a href="#">DOWNLOAD</a>
            <a href="#">CONTACT</a>
        </div>
        
        
    </body>
</html>

Bir sonraki aşamada görüşmek üzere…

Githup link: Aptana Studio 3

İndirme Link Sitesi: Aptana Studio 3

Posted on Utopian.io - Rewarding Open Source Contributors