https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 1
  • 1
  • 2
  • 3
  • 4
  • 5
CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı [10TL.Net]
#1
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:
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:
<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:
<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.
Ara
Cevapla PGM
Teşekkür verenler:
#2
süper menü teşekkürler
Ara
Cevapla PGM
Teşekkür verenler:
#3
Harika
Ara
Cevapla PGM
Teşekkür verenler:
#4
(13-08-2013 Saat: 19:59)MonsteR Nickli Kullanıcıdan Alıntı: süper menü teşekkürler
Cevapla PGM
Teşekkür verenler:
#5
Rica ederim arkadaşlar :)
Ara
Cevapla PGM
Teşekkür verenler:
#6
Müthiş de
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping