MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
BlackCat avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı


Sponsor Reklam
media venus

İzinli BlackCat
 Tarih: 13-08-2013, Saat:18:44
(Son Düzenleme: 13-08-2013, Saat:18:45, Düzenleyen: BlackCat.)
#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ü.

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

Açıklama-Detay 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(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.

.zip   animasyonmenu.zip (Dosya Boyutu: 26.78 KB / İndirme Sayısı: 23)

* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.
Cevapla
Bunu Beğenenler: WWXD , Funny , Machine , ßyßurak , tangoo2455 , Emektar , kafle , cRiminaLy , ali6351
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı WWXD
 Tarih: 13-08-2013, Saat:18:45
#2
Süper Tesekkurler Süper
Cevapla
Bunu Beğenenler:

Çevrimdışı Funny
 Tarih: 13-08-2013, Saat:18:58
#3
Eline Sağlık Yararlı Süper
Cevapla
Bunu Beğenenler:

Çevrimdışı Machine
 Tarih: 13-08-2013, Saat:19:10
#4
Yararlı insan,lazım olduğunda ortaya çıkar ve kaliteli paylaşımı yapar. Hocam böyle bir tarz konu arıyordum klavyenize sağlık emeğinize sağlık teşekkür ederim. Süper
Cevapla
Bunu Beğenenler:

Çevrimdışı Skrillex
 Tarih: 13-08-2013, Saat:19:54
#5
Bunun paylaşılacağını bilmediğim için bir siteden araklamıştım, neyse bunuda kullanırız artık Melek - Masum
Cevapla
Bunu Beğenenler:

İzinli BlackCat
 Tarih: 13-08-2013, Saat:20:54
(Son Düzenleme: 13-08-2013, Saat:20:55, Düzenleyen: BlackCat.)
#6
Yorumlar için teşekkürler arkadaşlar, arkadaşlarımıza tasarımları konusunda yardımcı olabildiysem ne mutlu bana Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı tangoo2455
 Tarih: 13-08-2013, Saat:21:35
#7
Hocam çok saolun sizin gibileri olduğu sürece bizde mutlu oluruz. paylaşımların için çok saol

ANASAYFA
Portal
Arama
Takvİm
Üyeler
Neler Yeni
Yönetici
vb. bunların İkonları yapılabilirmi. yada yapan varsa paylaşabilirmi.
Cevapla
Bunu Beğenenler:

Çevrimdışı Skrillex
 Tarih: 14-08-2013, Saat:01:20
#8
(13-08-2013, Saat:21:35)tangoo2455 Adlı Kullanıcıdan Alıntı: Hocam çok saolun sizin gibileri olduğu sürece bizde mutlu oluruz. paylaşımların için çok saol

ANASAYFA
Portal
Arama
Takvİm
Üyeler
Neler Yeni
Yönetici
vb. bunların İkonları yapılabilirmi. yada yapan varsa paylaşabilirmi.

Aynı kodları tekrarlayıp isimlerini ve gerekli yerlerini düzenleyip yapabilirsiniz, çokta zor olmasa gerek herşeyi hazır zaten Melek - Masum
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Google Tarzı Menü İstek Nyx. 8 1,718 14-08-2013, Saat:22:59
Son Yorum: Smyrna35
  [MD - 1.6] Turuncu .CSS menü Kodu xdersf 0 997 18-07-2013, Saat:21:03
Son Yorum: xdersf



Konuyu Okuyanlar: 1 Ziyaretçi