CSS & jQuery ile Animasyonlu Menü

\"css_jquery\"Bazı flash siteleri gerçekten ilham verici ve ziyaretçi üzerinde gerçekten güzel bir etki bırakıyorlar. Çılgın animasyonlar oldukça dikkat çekiyor. Fakat bu sitelerdeki navigasyon menüleri CSS ve jQuery birleşimi ile yapmak mümkün.

Bu yazıda da sizlere örnek bir animasyonlu menü nasıl oluşturulduğunu anlatacağım.

Sizde CSS ve jQuery ile hazırlanmış kendi menülerinizi tasarlayabilirsiniz.

\"jQuery

Adım 1.  HTML

Bu bölüm basit. Sırasız (unordered) liste oluşturacağız. Aşağıdaki kodları HTML sayfasına kendinize göre düzenleyerek yazın.

[php]
<ul id=\”topnav\”>

<li> <a href=\”#\”> Anasayfa </ a> </ li>

<li> <a href=\”#\”> Servisler </ a> </ li>

<li> <a href=\”#\”> Portföy </ a> </ li>

<li> <a href=\”#\”> Blog </ a> </ li>

<li> <a href=\”#\”> İletişim </ a> </ li>

</ ul>
[/php]

Adım 2. CSS

Her liste öğesi için maskeleme tekniği kullanacağız. CSS stil sayfamızı oluşturuyoruz. Aşağıdaki kodları <style> etiketi ile sayfanıza ekleyiniz:

[css]
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: #990000 repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: #99CCFF repeat-x left bottom;
}
[/css]

Adım 3. Animasyon – jQuery

HTML sayfamıza, jQuery dosyasını çağıracağız. jQuery sitesinden dosyayı indirmek için tıklayın. Eğer bunu yapamıyorsanız aşağıdaki kodu </head> etiketinden önce ekleyin:

[php]<script type = \”text / javascript\”
src = \”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js\”> </ script>[/php]

Son olarak jQuery eylemlerini açıklayan script kodlarını yine </head> etiketinden önce kod sayfamıza ekliyoruz:
[php]
<script type=\”text/javascript\”>

$(document).ready(function() {

$(\”#topnav li\”).prepend(\”<span></span>\”); //Throws an empty span tag right before the a tag

$(\”#topnav li\”).each(function() { //For each list item…
var linkText = $(this).find(\”a\”).html(); //Find the text inside of the a tag
$(this).find(\”span\”).show().html(linkText); //Add the text in the span tag
});

$(\”#topnav li\”).hover(function() { //On hover…
$(this).find(\”span\”).stop().animate({
marginTop: \”-40\” //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out…
$(this).find(\”span\”).stop().animate({
marginTop: \”0\” //Move the span back to its original state (0px)
}, 250);
});

});
</script>
[/php]

>> DEMO

Eğer herhangi bir yorum, öneri veya sorunuz varsa lütfen bana bildirmekten çekinmeyin.

Emrah

1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni, Yazar, WebMaster, Blogger, SEO eğitmeni. Araştırmacı, sinema sever, fitness yapar, farklı doğal güzellikleri keşfetmeye bayılır.

2 thoughts on “CSS & jQuery ile Animasyonlu Menü

  • 1 Şubat 2011 tarihinde, saat 23:08
    Permalink

    Gerçekten emeğinize sağlık
    nedense türkçe anlatım bulmakta çok zorluk çekiyoruz
    sizden bir ricam var
    bu konudan anladığınız belli
    Outside the Box jquery adında bir menu buldum
    gerçekten süper ama ingilizce bilmediğim için editlemeyi çözemedim
    bunu anlatan türk sitede yok eğer yardımcı olursanız ilk olacaksınız.
    hem sizin hitini hemde sayenizde bizim bilgimiz artacak

    http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

    Umarım Dileğim Yerine Gelir.
    Dua ve Selametle…

  • 2 Şubat 2011 tarihinde, saat 14:54
    Permalink

    Teşekkürler. İnceleyeceğim :)

Yorum Yap

Porno Gratuit Porno Français Adulte XXX Brazzers Porn College Girls Film érotique Hard Porn Inceste Famille Porno Japonais Asiatique Jeunes Filles Porno Latin Brown Femmes Porn Mobile Porn Russe Porn Stars Porno Arabe Turc Porno caché Porno de qualité HD Porno Gratuit Porno Mature de Milf Porno Noir Regarder Porn Relations Lesbiennes Secrétaire de Bureau Porn Sexe en Groupe Sexe Gay Sexe Oral Vidéo Amateur Vidéo Anal