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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(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.
|
1 |
$('a.Tikla').click(function(){ ..... } |
A Taglarından Class’ı Tikla olana tıklanıldığında şunları yap ( … )
|
1 |
$('.AltMenu').slideUp('fast'); |
Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.
|
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
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 6 7 8 |
<ul class="AnaMenu"> <li> <a></a> <ul class="AcilanMenu"> <li><a></a></li> </ul> </li> </ul> |
Tam html kodlarımız :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<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> |
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 Açılır Menü