13-08-2013, Saat:18:44
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ü.
Demo :
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.
Şablonlardan temanızı seçtikten sonra, Ana Sayfa Şablonlar=> index şablonunu açın ve {$header} ' ın altına aşağıdaki kodları ekleyin.
Son olarak resimlerimizi eklemek kaldı.
Hover efekti için, bir siyah birde beyaz icon kullanacaksınız. Kullanmak istemiyorsanız aynı iconun adını resimadı-beyaz.png olarak kaydedip images klasörüne atmak zorundasınız.
Ekte teknoloji,internet,bilgisayar,yazılım siyah ve beyaz ikonları mevcut. İndirerek images'e attıktan sonra yeni animasyonlu menünüzü kullanabilirsiniz.
Kolay gelsin.
[attachment=1131]
* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.
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ü.
Demo :Kod:
http://teknolojio.com/dosyalar/onizleme/css3-animasyon-menu/ KurulumTemalar Ş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:
<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(images/teknoloji.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
#catmenu ul li a#teknoloji:hover{background:url(images/teknoloji-beyaz.png)no-repeat center 10px;background-color:red;}
#catmenu ul li a#internet{background:url(images/internet.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
#catmenu ul li a#internet:hover{background:url(images/internet-beyaz.png)no-repeat center 10px;background-color:blue;}
#catmenu ul li a#bilgisayar{background:url(images/bilgisayar.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
#catmenu ul li a#bilgisayar:hover{background:url(images/bilgisayar-beyaz.png)no-repeat center 10px;background-color:green;}
#catmenu ul li a#yazilim{background:url(images/yazilim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
#catmenu ul li a#yazilim:hover{background:url(images/yazilim-beyaz.png)no-repeat center 10px;background-color:gray;}
#catmenu ul li a#donanim{background:url(images/donanim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
#catmenu ul li a#donanim:hover{background:url(images/donanim-beyaz.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:
<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>Son olarak resimlerimizi eklemek kaldı.
Hover efekti için, bir siyah birde beyaz icon kullanacaksınız. Kullanmak istemiyorsanız aynı iconun adını resimadı-beyaz.png olarak kaydedip images klasörüne atmak zorundasınız.
Ekte teknoloji,internet,bilgisayar,yazılım siyah ve beyaz ikonları mevcut. İndirerek images'e attıktan sonra yeni animasyonlu menünüzü kullanabilirsiniz.
Kolay gelsin.
[attachment=1131]
* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.
