İstediği yere ulaşması konusu, hepimizinde bildiği gibi, bütün sitelerde mevcut olan menü ya da navigasyon çubukları ile sağlanır..Aşağıda 18 adet örneği gösterdiğim menülerin nasıl yapıldığını görebilir, Demo ve download linklerini kullanarak kendi sitenize yerleştirebilirsiniz.

jQuery Navigasyon Menü Dersleri

CSS ve jQuery Kullanarak Slik Tablo Yapma Dersi — Demo | Detaylar

Tablet içerikler, hem sayfanızda yer kaplamaması, hem de göze hitap etmesi açısından çok yararlı bir bileşendir. İçerisinde önemli linklerini barındırabilir, WordPress sidebar bölümünde kullanabilir hatta biraz daha geliştirerek bunu bir eklenti halina getirebilirsiniz.

jQuery ile Smooth Animasyon Menü Nasıl Yapılır — Demo | Detaylar | Download

Smooth bir anlamda da pürüzsüz menüler jQuery ile nasıl yapılır bunu anlatan bir ders.

CSS Spriteları – Javascript Dersi — Demo | Detaylar

Bu derste yazar,jQueryve CSS kullanarak güzelbir menü yapma dersini göstermiştir.

jQuery Rastgele Link Renkleri Animasyonu — Demo | Detaylar

Bu derste, yazar yaptığınız bir jQuery Menünün linklerini rastgele renkler ile nasıl gösterebileceğimiz anlatmıştır.

Dropdown Animasyon Menü Dersi — Demo | Detaylar| Download

Bu derste yine güzel bir animasyon ile Drop down menü nasıl yapılır sorusuna cevap verilmiştir.

Lava-Lambası Şeklinde jQuery Menü yapma Dersi — Demo | Detaylar | Download

jQuery kullanarak farklı bir menü dersi.

Navigasyon ışık Efekti ile jQuery Menü — Demo | Detaylar | Download

Mootols Homepage olarak adlandırılan Navigasyon efektli jQuery Menü

jQuery Kullanarak Akordiyon Menü Dersi — Demo | Detaylar | Download

Bu derste de yazar, yine jQuery kullanarak Accordion stili bir menünün hazırlanışını göstermiştir.

jQuery idTabs — Demo | Detaylar | Download

jQuery idTabs adı verilen Menü dersi

jQuery Multilevel (çok seviyeli) Dropdown Menü — Demo | Detaylar | Download

Buradaki dropdown menüler ise birçok seviyeden ve alt submenülerden oluşuyor.

jQuery Arkaplan resim Efekti vererek Animasyon Menüsü— Demo | Detaylar

jQueryden yardım alınarak yapılmış bu menüde, fade yöntemi ile Menülerin arka planı değişmekte

Superfish – “menu jQuery plugin”Demo | Detaylar | Download —

Superfish adlı jQuery Menü

jQuery Drop down menu — Demo | Detaylar

Burada yine bir drop down menü dersi bulunuyor

HTML menü kodlaması ile jQuery Menü — Demo | Details | Download

HTML, CSS ve jQuery Kullanarak W3 standartlarında jQuery Menü

jQuery & CSS Örneği – Dropdown Menu — Demo | Details

Dropdown menüler farklı bir animasyonla gösterimde.

Digg.com Headerindaki Menü ve Download — Demo | Detaylar | Download

Digg de bulunan menü nasıl oluşturulur

jQuery Tabbed Navigation — Demo | Detaylar

jQuery Tabbed Navigasyon Menü

Renk Değiştiren jQuery Menü — Demo | Detaylar | Download

Burada da yine fade metodu ile şık bir menü tasarımı mevcut.

Dördüncü jQuery video dersimizde, sayfamıza jquery kullanarak var komutu ile yeni bir varyasyon oluşturma daha sonra bu varyasyonu fonksiyonlarımızda kullanarak örnek olarak yaptığımız listemizde yeni listelerin oluşmasını sağladık.

Merhaba arkadaşlar. İlk dersimizde jQuery’i kullanabilmek için ne gibi alanlardan faydalanabiliriz, jquery‘i sitemize nasıl import ederiz ve fadeOut yöntemini nasıl kullanırız sorularını cevapladık.Bu dersimizde ise jQuery‘de kullanabileceğimiz;

fadeOut, fadeIn, slideUp, slideDown, hide ve show metodlarını gösterdim.Daha kaliteli Görüntü için Videoyu indiriniz

Ben video izlemek istemiyorum diyen arkadaşlarımız için kısa bir özet geçeceğim.Download butonunu kullanarak indirdiğiniz ders içeriğinde, index.html ve jquery.js dosyasını bulacaksınız.

İndex’imizin içerisinde aşağıdaki bölümleri kullandık;

CSS

<style type="text/css">
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
</style>

Bir önceki dersimize nazaran bu dersteki CSS farklılıkları;

display: none; :

kutu olarak adlandırdığımız katmanın görünmemesini sağladı.

p a
{
color: orange;
}

<p> olarak kullandığımız paragraf belirtecinin içerisindeki link renklerini turuncu (orange) yapmamızı sağladı

Jquery

</p>
<p style="text-align: left;"><script type="text/javascript">

$(function()  {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});

});
</script></p>
<p style="text-align: left;">

Bir önceki dersimizde gördüğümüz fadeOut yöntemini bu dersimizde slide ve hide / show metordlarıyla gösterdik.

Daha sonra

$(‘p a’).css(‘color’ , ‘green’);

olarak belirttiğimiz fonksiyon, linklerimizden herhangi birine tıklanıldıktan sonra,css kodlarında belirttiğimiz p a belirtecinin rengini green olarak değiştirmesini sağladı.

Diğer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Metodları

Ders 3 -Animate Metodu

Ders 4 – Varyasyon Oluşturma

Ders 5 -  toggle ve toggleClass Metodları

Ders 6 -  jQuery Slidedown Metodu Kullanımı

Ders 7 -  jQuery Dersleri: hover() Metodu

Ders 8 -  jQuery hover ve chlidren Metodu

Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme

Merhaba arakdaşlar.. Bugün itibariyle video derslere başlamış bulunuyorum.. Çekim esnasında bir kaç hata yaptım fakat bunları çekim dışında düzenledim artık hatalarımı maruz görünüz:)

Ben video içeriği dışında bir kaç bilgi daha vermek istiyorum;

Rollever yapıyı oluşturabilmek için videodada göründüğü gibi bir fonksiyon oluşturduk. Fonksiyonumuzun asıl mantığı ilk başta görünen resmin daha sonra mouse ile üzerine geldiğimiz zaman transparanlık kazanım ve en sonunda opacity ayarlarının 0 ‘ a düşmesini sağlıyor, arka kısımda bulunan background resmimizi ortaya çıkarıyor.. Aslında zaten bir backgorund resmimiz vardı fakat üzerinde bir resim olduğu için görünmüyordu, resmin opacity ayarını düşürdüğümüz için arkaplanımız ortaya çıktı.

Kodlarımız şu şelilde;

HTML

<pre><span class="tag"><img </span><span class="atn">class</span><span class="tag">=</span><span class="atv">"fade"</span><span class="tag">
</span><span class="atn">src</span><span class="tag">=</span><span class="atv">"images/who.jpg"</span><span class="tag">
</span><span class="atn">style</span><span class="tag">=</span><span class="embsrc"><span class="pun">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="pln">images</span><span class="pun">/</span><span class="pln">who_ro</span><span class="pun">.</span><span class="pln">jpg</span><span class="pun">);</span><span class="str">"</span></span><span class="tag"> </span><span class="atn">/</span><span class="tag">></span></pre>

CSS

CSS sınıflarında backgorund-image olarak adlandırılan ismi kendi isteğinize göre değişebilirsiniz.Resmimizin pozisyounu float: right seçeneğini kullanarak istediğimiz gibi efect verebiliriz. İstersek resmin bir kısmını gösterip diğer kısımları transparan yaparak backgorund resmimizle birlikte çalışmasına izin verebiliriz. Fakat CSS sınıflarında bir değişiklik yaparsak bunlara yeni boyut kazandırıp, HTML kodlarımız arasında ki div komutunu yaptığımız stile göre değiştirmemiz gerekir.

jQuery

1. Span daki wrap resmi (resmin pozisyonunu belirten kod)

2. background-image kodundaki  arkaplan resmini ortaya çıkarma

3. Yeni bir resim olarak gösterme

4. Hover efecti ile resme animasyon katma:

(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);

var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);

if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {

$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}

$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};

})(jQuery);

$(window).bind('load', function () {
$('img.fade').cross();
});

Aklınıza takılan herhangi bir soru olursa ben buradayım.. Bu ilk videolu jquery dersimdi.. kusurlarım varsa madur görünüz. Heycandandır

<img class="fade"
  src="images/who.jpg"
  style="background: url(images/who_ro.jpg);" />