Javascript – jQuery – Sayfa 11 – aycan.net

jQuery Açılır Menü

Artık çoklu menulerde jquery açılır menu şart oldu bende dilimin döndüğünce şimdi jquery açılır menu yapmayı öğreteceğim. Öncelikle bu adresten jquery dosyamızı indiriyoruz ve css yatay veya dikey menulerimizi oluşturmaya başlıyoruz konu hakında bilgisi olmayanlar için css yatay menü ve dikey menuleri anlatmıştım o konudan esinlenerek öncelikle css dosyamızı sonra jQuery dosyamızı yazmaya başlıyalım.

Css Dosyamızı yazıyoruz

body{background-color: #333333;}
/*Dikey Menü Cssi*/
.kalip{width:250px; float:left;}
.kalip ul {width:250px; overflow: hidden; margin:0px auto;}
.kalip ul li{list-style:none;}
.kalip ul li a{width:190px; height:18px; background-color:#0033CC; font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:3px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}
/*Acilan menunün A özelliği*/<strong> </strong>
.kalip ul li ul {dispaly:none;}
.kalip ul li ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}
.kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2; font:bold 11px Tahoma; color:#0033CC; display:block; margin:5px; padding:7px 0px 0px 10px;} /*Yatay Menu Cssi*/
.yatay{ width:840px; height: 500px;float: left;}
.yatay ul{ width:840px; height: 500px;position: absolute; z-index: 1;}
.yatay ul li { list-style:none; float:left; }
/*Açılan Menunun ul li a özelliği*/
.yatay ul li ul{margin: 0; padding: 0; width: 220px; overflow: hidden; display: none; position: absolute; z-index: 2;}
.yatay ul li ul li{margin: 0; padding: 0; float: none;}
.yatay ul li ul li a{ width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}
.yatay ul li ul li a:hover{background-color:#e2e2e2; color:#0033CC;}
.yatay ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}
.yatay ul li a:hover{ background-color:#e2e2e2; color:#0033CC;}

body{background-color: #333333;}

/*Dikey Menü Cssi*/

.kalip{width:250px; float:left;}

.kalip ul {width:250px; overflow: hidden; margin:0px auto;}

.kalip ul li{list-style:none;}

.kalip ul li a{width:190px; height:18px; background-color:#0033CC; font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:3px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}

/*Acilan menunün A özelliği*/<strong> </strong>

.kalip ul li ul {dispaly:none;}

.kalip ul li ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}

.kalip ul li a:hover{width:190px; height:18px; background-color:#e2e2e2; font:bold 11px Tahoma; color:#0033CC; display:block; margin:5px; padding:7px 0px 0px 10px;} /*Yatay Menu Cssi*/

.yatay{ width:840px; height: 500px;float: left;}

.yatay ul{ width:840px; height: 500px;position: absolute; z-index: 1;}

.yatay ul li { list-style:none; float:left; }

/*Açılan Menunun ul li a özelliği*/

.yatay ul li ul{margin: 0; padding: 0; width: 220px; overflow: hidden; display: none; position: absolute; z-index: 2;}

.yatay ul li ul li{margin: 0; padding: 0; float: none;}

.yatay ul li ul li a{ width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}

.yatay ul li ul li a:hover{background-color:#e2e2e2; color:#0033CC;}

.yatay ul li a{width:190px; height:18px; background-color:#cd1821;font:bold 11px Tahoma; color:#e2e2e2; display:block; margin:5px; padding:7px 0px 0px 10px; -moz-border-radius:4px;}

.yatay ul li a:hover{ background-color:#e2e2e2; color:#0033CC;}

Burada menu kalıplarımızı oluşturduk ve alt menulerin özelliklerine display:none dedik yani görünmez yaptık. Css dosyamızın bu kadar karışık durduğuna bakmayın içine girdikten sonra en fazla 6 ayrı class’a özellik tanımlamışızdır.

jQuery Dosyamızı yazalım

$(document).ready(function(){
/* Açılır Dikey Menü için jQuery Kodları*/
$('a.Tikla').click(function(){
$('.AltMenu').slideUp('fast');
$(this).parent().find('.AltMenu').slideDown('fast');
});
/* Açılır Yatay Menü için jQuery Kodları */
$('a.Tiklayatay').hover(function(){
$(this).parent().find('.YatayAcilan').fadeIn('fast');
$(this).parent().hover(function() {}, function(){$(this).parent().find(".YatayAcilan").fadeOut('fast');});
});
});

$(document).ready(function(){

/* Açılır Dikey Menü için jQuery Kodları*/

$('a.Tikla').click(function(){

$('.AltMenu').slideUp('fast');

$(this).parent().find('.AltMenu').slideDown('fast');

});

/* Açılır Yatay Menü için jQuery Kodları */

$('a.Tiklayatay').hover(function(){

$(this).parent().find('.YatayAcilan').fadeIn('fast');

$(this).parent().hover(function() {}, function(){$(this).parent().find(".YatayAcilan").fadeOut('fast');});

});

Bütün işlemi gerçekleştiren en önemli kısım burası adım adım anlatıyorum.

$('a.Tikla').click(function(){ ..... }

1	$('a.Tikla').click(function(){ ..... }

A Taglarından Class’ı Tikla olana tıklanıldığında şunları yap ( … )

$('.AltMenu').slideUp('fast');

1	$('.AltMenu').slideUp('fast');

Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.

$(this).parent().find('.AltMenu').slideDown('fast');

1	$(this).parent().find('.AltMenu').slideDown('fast');

Burada ise Tıklanılan <a> tagında .AltMenu classlı div’i bul ve slideDown yap yani aç.

Dikey Açılır menümüz için yazdığımız js kodları bu kadar arkadaşlar. Yatay menü içinde bu kodlar geçerlidir. slideUp yerine fadeOut slideDown yerine fadeIn komutunu kullandık.

Şimdi ise Html kodlarımızı yazalım.

Html kodlarını yazmadan önce genel mantığımız bir ana menumuz olacak

<ul>
<li>
<a></a>
</li>
</ul>

<ul>

<li>

<a></a>

</li>

</ul>

ve bu menudeki <li></li> taglarının arasına açılacak alt menuyü yerleştireceğiz aşağıdaki örnekteki gibi.

<ul class="AnaMenu">
<li>
<a></a>
<ul class="AcilanMenu">
<li><a></a></li>
</ul>
</li>
</ul>

<li>

<a></a>

</ul>

</li>

</ul>

Tam html kodlarımız :

<div class="kalip">
<ul>
<li>
<a href="#" title="Aycam" class="Tikla">Aycan.Net</a>
<ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li>
<li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li>
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li>
<li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li>
<li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li>
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li>
<li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li>
</ul>
</li>
<li>
<a href="#" class="Tikla">Xotesi.Net</a>
<ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
<li><a href="http://xotesi.net/submit.php" title="Site Ekle">Site Ekle</a></li>
</ul>
</li>
<li>
<a href="#" class="Tikla">Zone.Org</a>
<ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
<li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li>
<li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li>
<li><a href="http://zone.org/php/" title="Php">Php</a></li>
<li><a href="http://zone.org/java-jsp-js-diger/" title="Java / Js / Jsp">Java / Js / Jsp</a></li>
<li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li>
<li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li>
<li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li>
<li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>
</ul>
</li>
<li>
<a href="#" class="Tikla">R10.Net</a>
<ul class="AltMenu" style="display: none; margin:0; padding: 0; margin-left:10px;">
<li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>
<li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>
<li><a href="http://www.r10.net/ajax/" title="Ajax">Ajax</a></li>
<li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>
</ul>
</li>
</ul>
</div>

<div class="yatay">
<ul>
<li>
<a href="#" class="Tiklayatay">Aycan.Net</a>
<ul class="YatayAcilan">
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li>
<li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li>
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li>
<li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li>
<li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li>
<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li>
<li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li>
</ul>
</li>

<li>
<a href="#" class="Tiklayatay">Xotesi.Net</a>
<ul class="YatayAcilan">
<li><a href="http://xotesi.net/submit.php" title="Site Ekle">Site Ekle</a></li>
</ul>

</li>
<li>
<a href="#" class="Tiklayatay">Zone.Org</a>
<ul class="YatayAcilan">
<li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li>
<li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li>
<li><a href="http://zone.org/php/" title="Php">Php</a></li>
<li><a href="http://zone.org/java-jsp-js-diger/" title="Java / Js / Jsp">Java / Js / Jsp</a></li>
<li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li>
<li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li>
<li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li>
<li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>
</ul>

</li>
<li>
<a href="#" class="Tiklayatay">R10.Net</a>
<ul class="YatayAcilan">
<li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>
<li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>
<li><a href="http://www.r10.net/ajax/" title="Ajax">Ajax</a></li>
<li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>
</ul>
</li>
</ul>
</div>

<ul>

<li>

<a href="#" title="Aycam" class="Tikla">Aycan.Net</a>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li>

<li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li>

<li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li>

<li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li>

<li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li>

</ul>

</li>

<li>

<a href="#" class="Tikla">Xotesi.Net</a>

</ul>

</li>

<li>

<li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li>

<li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li>

<li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li>

<li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li>

<li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li>

<li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>

</ul>

</li>

<li>

<li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>

<li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>

<li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>

</ul>

</li>

</ul>

</div>

<ul>

<li>

<a href="#" class="Tiklayatay">Aycan.Net</a>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jquery-fadeto.html" title="jQuery fadeTo">jQuery fadeTo </a></li>

<li><a href="http://www.aycan.net/blog/webmaster/web-yazilim-tasarim-programlari.html" title="Web yazılım & tasarım programları">Web yazılım tasarım programları</a></li>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/jqueryde-acilir-kapanir-div.html" title="jQuery’de Açılır-Kapanır Div">jQuery’de Açılır-Kapanır Div</a></li>

<li><a href="http://www.aycan.net/blog/css/haydi-ul-li-taglarini-ogrenelim.html" title="Haydi ul – li taglarını öğrenelim">Haydi ul – li taglarını öğrenelim</a></li>

<li><a href="http://www.aycan.net/blog/css/cssde-opacity-komutu.html" title="Css’de Opacity komutu">Css’de Opacity komutu</a></li>

<li><a href="http://www.aycan.net/blog/jquery-ajax-javascript/ie-6-da-sorun-cikartan-png-resimlerin-cozumu.html" title="IE6 Png Sorunu">IE6 Png Sorunu</a></li>

<li><a href="http://www.aycan.net/blog/php/php-fonksiyon-yazalim.html" title="Php Fonksiyon yazalım">Php Fonksiyon yazalım</a></li>

</ul>

</li>

<li>

<a href="#" class="Tiklayatay">Xotesi.Net</a>

</ul>

</li>

<li>

<li><a href="http://zone.org/webmaster-genel/" title="Webmaster Genel">Webmaster Genel</a></li>

<li><a href="http://zone.org/programlama-dilleri/" title="Programlama Dilleri">Programlama Dilleri</a></li>

<li><a href="http://zone.org/html-css-dhtml/" title="Html Css Dhtml">Html Css Dhtml</a></li>

<li><a href="http://zone.org/web-grafik-tasarim/" title="Web Grafik Tasarım">Web Grafik Tasarım</a></li>

<li><a href="http://zone.org/forum.php#webmaster-kahvesi" title="Webmaster Kahvesi">Webmaster Kahvesi</a></li>

<li><a href="http://zone.org/uyeler/aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>

</ul>

</li>

<li>

<li><a href="http://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>

<li><a href="http://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>

<li><a href="http://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>

</ul>

</li>

</ul>

</div>

Resim :

Takıldığınız noktaları belirtirseniz elimden geldiğince cevaplamaya çalışacağım.

Html kodlarımızda bu kadar arkadaşlar demo için bu adrese bakabilirsiniz :
jQuery Açılır Menü

jQuery fadeTo

fadeTo görselliğe önem veren webtasarımcılar için artık vazgeçilemeyecek bir elementdir.
fadeTo ne işi yapar ?
Hepimizinde css’deki vazgeçemeyeceğimiz opacity elementinin jQuery kütüphanesinde yazılmış ve animasyonlu halidir. Tüm tarayıcılarda sorunsuz bir şekilde çalışır ve ziyaretçilerimiz efekti anlayamazlar ama çok hoşlarına gidecektir. fadeTo elementini kullanmak çok basit sadece hangi bölgedeki resimlere efekt verebileceğimizi jQuery dosyamızda belirteceğiz bu arada herkez jquery.js dosyasını index.html’sine entegre edeceğini biliyordur.

Öncelikle html dosyamızı yazıyoruz.

<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

Html kısmında h1 yani başlığımızı koyduk sonra bir .MahsetHaberIcerik diye bir div oluşturduk ve içine listemizi koyduk.

Şimdi Css dosyamızı yazalım.

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

Css kısmında MahsetHaber ile h1 tagımızın özelliğini belirledik .MansetHaberIcerik kısmında div’imizin boylarını belirledik sonra ul ve li’leri tanımladık.
Şimdi jQuery komutlarımızı yazalım

$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

Js kısmında (en önemli kısım) burada

$(document).ready(function () ) { ...}

1	$(document).ready(function () ) { ...}

Sayfa yüklendiğiden şunları yap

$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

1	$('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

.MahsetHaberIcerik divinin içindeki ul’un içindeki li’nin içindeki img yani resimleri bul ve opacity değerini 0.50 yap.

function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

1	function ResimGoster (ResimId) { $('#' + ResimId).stop().fadeTo("fast", 1); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 1 yap.

function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

1	function ResimKapat (ResimId) { $('#' + ResimId).stop().fadeTo("fast",0.50); }

Resimlerin üstüne geldiğinde üstüne gelen resimin id’sini al ve opacity değerini 0.50 yap.

Js dosyamızında nasıl çalıştığını anlattım.

Komple Html dosyamız.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Aycan.Net fadeTo"/>
<meta name="keywords" content="Aycan.Net fadeTo"/>
<meta name="ROBOTS" content="FOLLOW, INDEX"/>
<title>Aycan.Net fadeTo</title>

<script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function ()
{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);
})

function ResimGoster (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 1);
}
function ResimKapat (ResimId)
{
$('#' + ResimId).stop().fadeTo("fast", 0.50);
}
</script>
<style>
.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }
.MahsetHaberIcerik{width:500px; overflow:hidden; }
.MahsetHaberIcerik ul{ list-style: none; }
.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }
</style>
</head>
<body>
<h1 class="MahsetHaber">Mahşet Haberler</h1>
<div class="MahsetHaberIcerik">
<ul>
<li>
<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"
onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>
</li>
<li>
<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>
</li>
<li>
<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"
onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>
</li>
<li>
<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"
onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>
</li>
</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Aycan.Net fadeTo</title>

$(document).ready(function ()

{ $('.MahsetHaberIcerik ul li img').fadeTo('fast',0.50);

})

function ResimGoster (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 1);

}

function ResimKapat (ResimId)

{

$('#' + ResimId).stop().fadeTo("fast", 0.50);

}

</script>

<style>

.MahsetHaber{ background-color:#353D45; width:433px; color:#e2e2e2; font: 16px 'Trebuchet MS'; }

.MahsetHaberIcerik{width:500px; overflow:hidden; }

.MahsetHaberIcerik ul{ list-style: none; }

.MahsetHaberIcerik ul li { float:left; width:205px; height: 100px; margin:10px 5px 0px 10px; }

</style>

</head>

<body>

<h1 class="MahsetHaber">Mahşet Haberler</h1>

<ul>

<li>

<img id="1" src="http://static.jquery.com/books/jquery-for-designers_thumb.jpg"

onmouseover="ResimGoster('1');" onmouseout="ResimKapat('1');"/>

</li>

<li>

<img id="2" src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('2');" onmouseout="ResimKapat('2');"/>

</li>

<li>

<img id="3"src="http://static.jquery.com/books/jquery-in-action-2ed_thumb.jpg"

onmouseover="ResimGoster('3');" onmouseout="ResimKapat('3');"/>

</li>

<li>

<img id="4" src="http://static.jquery.com/books/learning-jquery-1.3_thumb.jpg"

onmouseover="ResimGoster('4');" onmouseout="ResimKapat('4');"/>

</li>

</ul>

</div>

</body>

</html>

jQuery fadeTo

jQuery’de Açılır-Kapanır Div

jQuery / Ajax / JavaScript kategorisinin ikinci makalesi ile artık jQuery ye adım atıyoruz şimdiki konumuz basit ama konunun temel bilgi olması için üzerinde biraz fazla duracağım. Bundan sonraki derslerimizde jQuery ile post işlemleri gibi işlemler yapcağız, şimdiki konumuz jQuery deki slideUp() , slideDown() ve toggle() fonskiyonlarını kullanmak.

İndex.html sayfamızı hazırlıyoruz
Öncelikle tagları arasına jquery.js dosyasımızı entegre ediyoruz. ( jquery.js dosyamız js/ dizinin altındadır. )

<head>
<script src=”js/jquery.js” type=”text/javascript”></script>
</head>

<head>

</head>

Şimdi arkadaşlar 2 şekilde div açma ve kapatmayı yapabiliriz şimdi birinci yolu göstereceğim.

Birinci Yol

Aşağıdaki kodları <head> </head> tagları arasına yazıyoruz.

$(document).ready(function () {
$('#Menu a').click(function () {
$('#Menuiki').slideDown('medium');
});
});

$(document).ready(function () {

$('#Menu a').click(function () {

$('#Menuiki').slideDown('medium');

});

Bu kodlar belki zor görünüyor gibi gelebilir ama korkmaya gerek yok arkadaşlar teker teker anlatacağım.

$(document).ready(function () { xxxxx });

1	$(document).ready(function () { xxxxx });

belge tamamen yüklendiğinde xxxxxxx diye belirttiğimiz fonksiyonları çalıştır.

$('#Menu a').click(function () {yyyyyyyy });

1	$('#Menu a').click(function () {yyyyyyyy });

<div id="Menu">
<a href="#">Aç</a>
</div>

</div>

Burada Menu class’ının altındaki herhangi bir <a></a> tagına tıklandığında yyyyyy işlemini gerçekleştir diyoruz.

$('#Menuiki').slideDown('medium');

1	$('#Menuiki').slideDown('medium');

Burada ise

<div class="Menuiki"></div>

1	<div class="Menuiki"></div>

Div’îni slideDown yani aşağıda doğru slayt efektiyle açıyor.

Burada slideDown yerine slideUp toggle taglarınıda kullanabilirsiniz aslında daha fazla etiket kullanabilirsiniz ama şimdilik ben bu üç fonksiyonu anlatıyorum.

Bu Birinci yoldu yani jQuery’de de belirttin xx adlı ziyaretçi şu divin içindeki şu <a></a> tagına tıklarsa şu divi aç diye belirttik.

Demo :

slideUp
slideDown
Toggle

İkinci Yol

Şimdi ise direk biz istediğimiz <a></a> tagına değer vereceğiz. öncelikle jquery.js dosyasını <head></head> tagları arasına entegre ediyoruz.

<head>
<script src="/jsjquery.js" type="text/javascript"></script>
</head>

<head>

</head>

jquery.js yi entegre ettikten sonra sitemizdeki herhangi bir <a> </a> tagına gidip

<a href="#" onclick="$('#Aycan').slideDown('normal');
$('#Zone').slideDown('normal');">Divleri aç /kapat</a>

1 2	<a href="#" onclick="$('#Aycan').slideDown('normal'); $('#Zone').slideDown('normal');">Divleri aç /kapat</a>

Divleri aç / kapat linkine tıkladığımız zaman #Aycan div’ini aşağı doğru açacak #Zone divini ortadan kaldıracak.

Burada slideUp fonksiyonun yerine slideUp() , slideDown() ve toggle() bu fonksiyonlarıda yazabilirsiniz.

Demo : Toggle

Sonuç :

Umarım anlamışssınızdır, anlamadığınız kısımları konu altında belirtirseniz elimden geldiğince yardım etmeye çalışacağım bu arada artık jQuery anlatımları için bir klasör oluşturdum onu şuan veriyorum artık bütün değişiklikler orda olacak.

buradan

İE 6 da sorun çıkartan PNG resimlerin çözümü

Evet arkadaşlar tasarımcı arkadaşlar her geçen gün daha güzel tasarımlar yapmak için her türlü resim uzantısı her türlü gölgeyi kullanıyor ve sitemiz son sürüm tarayıcılarda güzel çıkıyor.

Sonra bir gun şaş kaza eski örn: IE6 tarayıcısı ile sitesine girdiğinde görüyorki png resimlerin arkası siyah siyah yani resimler transparan özelliğini kaybediyor.

Her neyse hemen konuya girmek gerekirse Bu Webmaster arkadaşlara zorluk çıkartan geri kafalı tarayıcı için düzenlenmiş bir jQuery’dosyası ve bir resim ile bu işten kurtuluyoruz.

Eklentinin amacı: İe6 da transparan resim kullanırken çıkan hataları düzenlemek.

Eklentideki supersleight-min.js Dosyasını ve x.gif adlı resimi ftp’de “js” adlı bir klasör oluşturup içine atalım

Sonraki işlemimiz Sitemizin Header yani başkısmındaki <head> </head> tagları arasına şu kodu yerşeltirelim

<script type="text/javascript" src="js/supersleight-min.js"></script>

1	<script type="text/javascript" src="js/supersleight-min.js"></script>

Ve arkadaşlar artık sorun ortadan kalktı sadece index.php ye ekliyeceğimiz bir jQuery dosyası ile bütün sitedeki *.png resimlerini bulup transparan olan kısımları x.gif resmi ile kesip dolduruyor

Görsel olarak anlatmak gerekirse bu eklentiyi kullandıkdan sonraki hali ;

Eklentiyi kullanmadan önceki hali ;

Ek dosya buyrun arkadaşlar: http:/www.aycan.net/resim/js.rar