escort bayan

istanbul escort turk porno bursa escort bursa escort konya escort gaziantep escort gaziantep escort

istanbul escort

escort istanbul

CSS & jQuery ile Animasyonlu Menü

css_jqueryBazı 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 Menu

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.

<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>

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:

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;
}

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:

<script type = "text / javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> </ script>

Son olarak jQuery eylemlerini açıklayan script kodlarını yine </head> etiketinden önce kod sayfamıza ekliyoruz:

<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>

>> DEMO

Bunu da Oku:  YouTube Videolarına Overlay Paylaş Düğmeleri Ekleme

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 olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

Bunları da sevebilirsiniz

CSS & jQuery ile Animasyonlu Menü” için 2 yorum

  1. 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…

Yorum Yap

istanbul evden eve nakliyat ofis tasima
istanbul evden eve nakliyat ofis tasima kartal escort alanya Escort konya escort porno izle manavgat escort