CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı [10TL.Net]

[BlackCat]

MyBB temanızı geliştirmek, görsel anlamda daha fazla zenginlik katmak istiyorsanız hover efektli güzel bir animasyon menüye sahip olabilirsiniz.
Sadece CSS ve HTML öğelerini kullanacağız.
Başlamadan önce demo adresini verelim, ekran görüntüsünde menünün özellikeri görünmez çünkü.

:dlink: Demo :

Kod: Tümünü Seç Tümünü Kopyala

http://teknolojio.com/dosyalar/onizleme/css3-animasyon-menu/

:aciklama: Kurulum
Temalar Şablonlardan, temanızını seçtikten sonra global.css ' ye girin. Gelişmiş düzenlemeye tıkladıktan sonra en alta aşağıdaki kodları ekleyin ve kapatın.

Kod: Tümünü Seç Tümünü Kopyala

<style type="text/css">
            body{background-color:#EEEEEE;font-family:arial;font-size:13px;margin:0;padding:0;}
            a:hover{color:white;}
            #catmenu{background-color:#e5e5e5;margin:20px 0px 0px 20px;box-shadow:2px 2px 3px #AAAAAA;display:inline-block;}
            a{text-decoration:none;color:black;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;}
            #catmenu ul{margin:0;padding:0;}
            #catmenu ul li{list-style:none;float:left;border-right:1px solid #EEEEEE;}
            #catmenu ul li#son{border-right:none;}
            #catmenu ul li a#teknoloji{background:url(http://t1308.hizliresim.com/1d/f/rfwnu.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#teknoloji:hover{background:url(http://r1308.hizliresim.com/1d/f/rfwpb.png)no-repeat center 10px;background-color:red;}
            #catmenu ul li a#internet{background:url(http://p1308.hizliresim.com/1d/f/rfwn8.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#internet:hover{background:url(http://t1308.hizliresim.com/1d/f/rfwnk.png)no-repeat center 10px;background-color:blue;}
            #catmenu ul li a#bilgisayar{background:url(http://t1308.hizliresim.com/1d/f/rfwlq.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#bilgisayar:hover{background:url(http://r1308.hizliresim.com/1d/f/rfwmj.png)no-repeat center 10px;background-color:green;}
            #catmenu ul li a#yazilim{background:url(http://t1308.hizliresim.com/1d/f/rfwpm.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#yazilim:hover{background:url(http://p1308.hizliresim.com/1d/f/rfwpu.png)no-repeat center 10px;background-color:gray;}
            #catmenu ul li a#donanim{background:url(http://p1308.hizliresim.com/1d/f/rfwms.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#donanim:hover{background:url(http://t1308.hizliresim.com/1d/f/rfwmy.png)no-repeat center 10px;background-color:orange;}

        </style>

Şablonlardan temanızı seçtikten sonra, Ana Sayfa Şablonlar=> index şablonunu açın ve {$header} ' ın altına aşağıdaki kodları ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

<div id="catmenu">
            <ul>
                <li><a id="teknoloji" href="#">Teknoloji</a></li>
                <li><a id="internet" href="#">İnternet</a></li>
                <li><a id="bilgisayar" href="#">Bilgisayar</a></li>
                <li><a id="yazilim" href="#">Yazılım</a></li>
    
            </ul>
        </div>

Yeni eklemek için, css den bir tane daha ekleyebilirsiniz.
Hover efekti için, bir siyah birde beyaz icon kullanacaksınız. Kullanmak istemiyorsanız cssde hover efektinin bulunduğu koddaki (örn: #ateknoloji:hover) resim linkine aynı resmi ekleyebilirsiniz.


* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.

[MonsteR]

süper menü teşekkürler

[Helper]

Harika

[Ripbyrustavi]

süper menü teşekkürler

[BlackCat]

Rica ederim arkadaşlar :)

[zorbaba]

Müthiş de