CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Baskı Önizleme

CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: Webmaster Deposu (https://mybbdepo.com/webmaster-deposu-forumu)
+--- Forum: Web Tabanlı Kodlama Dilleri (https://mybbdepo.com/web-tabanli-kodlama-dilleri-forumu)
+---- Forum: Css (https://mybbdepo.com/css-forumu)
+---- Konu Başlığı: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı (/css3-animasyonlu-ve-hover-efektli-menu-tasarimi-konusu.html)

Sayfalar: 1 2

CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - BlackCat - 13-08-2013

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 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.
[attachment=1131]

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

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - WWXD - 13-08-2013

Süper Tesekkurler Süper

Süper

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Funny - 13-08-2013

Eline Sağlık Yararlı Süper

Süper

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Machine - 13-08-2013

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

Süper

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Skrillex - 13-08-2013

Bunun paylaşılacağını bilmediğim için bir siteden araklamıştım, neyse bunuda kullanırız artık Melek - Masum

Melek - Masum

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - BlackCat - 13-08-2013

Yorumlar için teşekkürler arkadaşlar, arkadaşlarımıza tasarımları konusunda yardımcı olabildiysem ne mutlu bana Gülümseme

Gülümseme

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - tangoo2455 - 13-08-2013

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.

Cvp: CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı - Skrillex - 14-08-2013

(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

Melek - Masum