Öncelikle jQuery ve CSS ile yapılabilecek uçsuz bucaksız yaratıcılık örneklerinden bir tanesini çok hıoşuma gittiği içimn sizlerle paylaşacağım. Bu eğitsel için öncelikle sizlere jquery hakkında biraz bilgi vermek istiyorum. Bu anlamda benimde "doğru bilgi" edinebilenecek güzel siteler arasında başvurduğum site olan eburhan'dan yardım alacağız.
jQuery nedir ve kimler tarafından kullanılıyor?
jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Şu anda ise 15 kişilik bir ekip tarafından gelişimi sürdürülüyor. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.
jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek istiyorum. Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır. Daha fazlası için jQuery Kullanan Siteler sayfasına bakabilirsiniz.
Şimdi geldi menümüzü yapmaya. Öncelikle menümüzde kullanacağımız belli başlı materyalleri kendinize göre edinmeniz gerekecek. Bunun için eğitimin aslında da önerilen site gerçekten bu konuda sizlere yardımcı olabilecek konumda. Buyrun buradan ikon setlerini inceleyebilir ve aşağıda eğitimine geçeceğimiz uygulamada kullanabilirsiniz.
Şimdi uygulamaya geçelim:
1. HTML Yapısı
HTML yapımızı oluşturuken kullanacağımız tek şey basit bir listeleme kod sistemi. Bu sistemde bir ID kullanıyoruz ki bunu daha sonra JS kodlarında çağırmak mümkün olsun.
<ul id="navigation">
<li class="home"><a href=""><span>Anasayfa</span></a></li>
<li class="about"><a href=""><span>Hakkımda</span></a></li>
<li class="search"><a href=""><span>Arama</span></a></li>
<li class="photos"><a href=""><span>Fotoğraglar</span></a></li>
<li class="rssfeed"><a href=""><span>Rss Kaynakları</span></a></li>
<li class="podcasts"><a href=""><span>Müziğim</span></a></li>
<li class="contact"><a href=""><span>İletişim</span></a></li>
</ul>
2. CSS
Öncelikle CSS yapımızda yapmamız gereken menümüzü nereye yerleştirmek istediğimizden geçiyor. Burada asıl amaç menü sitemizi ziyeret eden ziyaretçimizin kolay erişebileceği bir yerde olmasıdır. Yapısın itibari ile de menümüzün sağ üst köşede yer alması daha uygun görünüyor. Kodlar:
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
yukarıda belirttiğimiz CSS özellikleri ile yaptıklarımızdan en önemlisi "Position:Fixed" ile menümüzü sabitlemiz. Böylece sayfa aşağı kaydırıldığında dahi menümüz kullanıcının erişebileceği bir yerde olmuş olacak. Menümüzün uzunluğu yaklaşık 721 px bu da kullandığımız görsellere göre HTML yapısını oluşturduğumuz menü bağlantı sayısı ile ilişkilidir.
Şimdi listelediğimi menü elemanlarına bakalım:
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ve bağlantı stillerimiz için:
ul#navigation li a {
display: block;
float: left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color: #E7F2F9;
background-repeat: no-repeat;
background-position: 50% 10px;
border: 1px solid #BDDCEF;
text-decoration: none;
text-align: center;
padding-top: 80px;
}
Burada web sayfanızın temel yapısına göre yukarıda renklendirilmiş renk kodlarını değiştirebilirsiniz.
Şimdi biraz menülerimize yumuşatılmış köşeler yapalım ve yarı-saydam bir hava verelim ama bu Internet Explorer'da çalışmayacaktır. Bunun için;
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
text-decoration:none;
text-align:center;
padding-top:80px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
yukarıda renklendirilmiş kodları kullanacağız ve böylelikle IE'de daha çalışabilir hale getiriyoruz.
Şimdi menümüzde kullanacağımız görseller için bazı özellikler gireceğiz. Bağlantılarımızın arkaplanlarına yazımızın en başında bahsettiğimiz ikon setlerinden bazılarını kullanarak daha görsel bir menü oluşturacağız.
ul#navigation .home a{
background-image: url(../images/home.png);
}
ul#navigation .about a {
background-image: url(../images/id_card.png);
}
ul#navigation .search a {
background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(../images/rss.png);
}
ul#navigation .photos a {
background-image: url(../images/camera.png);
}
ul#navigation .contact a {
background-image: url(../images/mail.png);
}
üzerine geldiğimizde değişen bir bağlantı şekli veriyoruz şimdi
ul#navigation li a:hover{
background-color:#CAE3F2;
}
yine renk kodlarını istediğiniz gibi düzenleyebilirsiniz. sıra menümüzdeki st,il kodlarına geldi;
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
3. Javascript
Şİmdi JS motorumuzu çalıştıracağız ve menümüzü daha hareketli bir hale getirmiş olacağız. Menümüzün geliş animasyonu ve sürelerini burada belirliyoruz.
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
umarım faydalı bir yazımızın kaynağına buradan ulaşabilirsiniz.