Animasyonlu menü hazırlamak

HTML ve CSS kullanarak ilk önce basit bir şekilde menümüzü oluşturuyoruz ve arkasından jQuery tarafında ise jQuery .hover ve animation özellikleri ile menümüzü hareketlendiriyoruz.

Merhaba arkadaşlar,

Bu ders ile birlikte sizlere "HTML, CSS ve jQuery" kullanarak animasyonlu bir yan menü hazırlanmasını göstereceğim. Ben menüyü IE7+, FF3.5, Opera 10 ve Safari 4 sürümleri ile test ettim ve hepsinde de sağlıklı çalışıyor. Diğer browserlarda da herhangi bir sorun olacağını sanmıyorum.

Hazırsanız başlayalım.

İlk önce "" taglarının arasına:


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>



bu linkimizi ekleyerek jquery 1.3.2 sürmünü sayfamıza çağırıyoruz.

Unutmayın! Eğer jQuery'yi sayfanız da çağırmaz iseniz menünüz çalışmaz.

Ilk önce aşağıdaki şekilde HTML kodlarımızı yazıyoruz.


<ul id="menu">

                <li><a href="http://www.oguzcan.org" target="_blank">oguzcan.org</a></li>

                <li><a href="http://www.microsoft.com" target="_blank">microsoft.com</a></li>

                <li><a href="http://www.bing.com" target="_blank">bing.com</a></li>

                <li><a href="http://www.yahoo.com" target="_blank">yahoo.com</a></li>

                <li><a href="http://www.google.com" target="_blank">google.com</a></li>

            </ul>



Evet HTML kodlarımızı yazdıktan sonra şimdi sıra CSS kodlarımıza geldi. Ben CSS kodlarımı hazırladığım HTML sayfamın içinde


<style type="text/css"> /* CSS Kodlarımız */ </style>]



yukarıda gördüğünüz alana yazdım siz isterseniz ayrı bir CSS dosyası oluşturup onu sayfamıza link olarak ekleyerekte yapabilirsiniz.

Evet şimdi CSS kodlarımızı yazıyoruz. Gerekli açıklamalar kodların içinde yorum satırı olarak verilecektir.


İlk önce ul tagımızı belirtiyoruz ve arkasından da # işareti ile css seçicilerimizden olan ID ismimizi veriyoruz.

Arkasından width ve height değerlerimizi tanımlıyoruz. Bu değerler menünün toplam kaplayacağı alanı belirtmektedir. Daha sonra "padding-left:0;" değeri ile ben sol tarafta kalan boşluğu sıfırlamak için kullanmıştım. Siz isterseniz kullanmayabilirsiniz ya da kendinize göre değiştirebilirsiniz. Son olarakta Internet Explorer 7'de oluşan bir sorunumuz için "font-size:0;" değerimizi tanımlıyoruz ki animasyon da oluşucak patlamanın önüne geçelim :).


ul#menu{width:150px; height:100px; padding-left:0; font-size:0;}



Evet şimdi sıra liste kısmını kodlamaya geldi. Liste içinde yine li etiketimizin neyin içinde olduğunu belirterek li için bir sınıf tanımlamaktan kurtuluyorum. Arkasından "list-style:none;" değeri ile listemizin yanında bulunan daire ikonlarımızı yok ediyoruz. Şimdi ise her bir linkimizin bulunduğu listemizin arkaplan rengini ve font bilgilerini tanımlıyoruz. Son olarakta aralarında birer px boşluk bırakmak için border-bottom değerini veriyoruz.


ul#menu li{list-style:none; background:#666; font:13px Tahoma; border-bottom:1px solid #ccc;}




Ve geldik son CSS kodumuza. Burada ise ID'si ul olan ve içindeki listenin "a" tagına ait olan CSS kodumuzu yazıyoruz.
Aslında burada pek bir şey yok. Ilk önce linklerimizin renginin beyaz olacağını ve altlarının çizili olmayacağını belirtiyoruz ve arkasından "display:block;" değeri ile hem linklerimizin etrafından birer satır boşluk bırakmasını sağlıyoruz hem de linklerimizin sadece textin üstüne gelince değil linkin etrafında herhangi bir yere gelince de linkin aktif olmasını sağlıyoruz. Son olarakta "padding:7px;" değerini vererek linklerimizin biraz daha geniş ve düzgün bir hal almasını sağlıyoruz. (Burada özellikle padding değerlerini kullanmalıyız, eğer margin verirsek listeler arasında boşluklar ve bozulmalar meydana gelir. Ve böyle bir menü de kimsenin hoşuna gitmez sanırım :). )


ul#menu li a{color:#fff; text-decoration:none; display:block; padding:7px;}



Son olarakta Javascript'in en çok tutulan ve kullanılan kütüphanesi jQuery kodlarımızı yazıyoruz. Yine ben jQuery kodlarımı


<script type="text/javascript"> //Javascript kodlarımız </script>



taglarının arasına yazıyorum. Siz CSS'te anlattığım gibi isterseniz ayrı bir dosyaya yazıp link verebilirsiniz.


function menuYarat()

                {

                    $("li").hover

                    (

                        function()

                        {

                            $(this).animate({opacity: 0.7},500);

                        },

                        function()

                        {

                            $(this).animate({opacity: 1},500);

                        }

                    )

                }




Evet görmüş olduğunuz gibi jQuery kodumuz yukarıda. Eğer bunu Javascript ile yapmaya kalksaydık kayda değer bir zaman harcamamız gerekirdi ayrıca yine Cross-Browser için de çıkıcak sorunları çözmemiz gerekebilirdi. Fakat jQuery ile menümüzün tüm işi 5 dk içerisinde bitiyor.

Yukarıdaki kodlarımızı açıklamaya başlayalım.

İlk önce "function menuYarat()" kodumuz ile bir fonksiyon yaratıyoruz. Arkasından jQuery'de herhangi bir elementi yakalamamız için bolca kullandığımız "$" işaretimiz ile parantez içindeki "li" HTML elementimizi yakalıyoruz ve yine ".hover" değeri ile "li" HTML elementimizin üstüne gelindiği zamanki durumunu yakalıyoruz ve tekrar içinde bir fonksiyon oluşturarak içine animasyonumuz için gerekli kodu yazıyoruz. Burada "this" değeri yine üst tarafta kullandığımız "li" HTML elementimizi belirtmektedir. Arkasından ".animate({opacity: 0.7},500);" kodumuz ile menümüzün üstüne gelindiğince opacitysi yani şeffaflığının 0.7 olacağını belirtiyoruz ve bu şeffaflığın "500 milisaniye" hızında hareket edeceğini belirtiyoruz. Son olarakta tekrar bir fonksiyon yaratarak tekrar "li" HTML elementimizi yakalıyoruz ve mousemuz bu elementimiz üzerinden çekildiği zaman yani ".hover" durumundan çıktığı zaman yine "500 milisaniye" içerisinde şefflık değerini eski haline getirmesini istiyoruz.

Ve tabiki menümüzün çalışması için "" elementimize onload="menuYarat()" değerini eklemeyi unutmuyoruz :).

İşte bu kadar.. Menümüz hazır.
  • Etiketler;
Oğuzcan Şahin
Hakkında bilgi en kısa sürede eklenecektir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Eğer Demo sayfasını açabiliyorsan oradan Farklı-Kaydet ile Demo sayfasını alabilirsin. Zaten kaynak dosyası da budur.
kaynak dosyada sorun yok
Geçici bir durum olabilir kaynak dosyanın sunulduğu sitede sorun var. Ancak önemli değil. Yazarak alışmış oluyoruz. Uyguladım gerçekten kullanışlı bir menü oldu. Teşekkürler.

Yukarı Git