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ü
Aycan kardeş.. eline sağlık.. inş. çalışmalarımda denicem…
Aferüm eferüm, olcan sen 🙂
Ellerine sağlık. Güzel makale olmuş.
Güzel menü örneği yeni temamda kullanacam bunu footerdan bir link çakarım artık bloguna :p
Güzel olmuş aycan kardeş, böyle güzel anlatımlar yapılmıyor artık…
teşekurler aycan kardes
Kullanıyorum Dostum Emeğine sağlık çok güzel bir menü stili 😉
güzel bi menü örneği teşekkürler hocam
Dostum bunun dikey menü kısmının kapananını da yapsan iyi olurdu açılıo ama kapanmıo =)
hocam oncelıkle tsk ler. ben bunu asp.net te uyarladımda ordan bır bolume aıt baska bolumler gelcek
<asp:Label ID="lblKategoriId" runat="server" Text='’ Visible=”false”>
<%– –%>
<a rel='sc’>
<%– –%>
<%–
–%>
<%– –%>
<%—-%>
<%—-%>
css kısmı boyle
cs kısmındada kod yazarak alt menuye esıtledım ama gozukmuyor.. yardımcı olabılrmısın ?
Kodların tam çıkmamış.
peki açılır menüleri asp ye nasıl uyulayabilrizi yazar arkadaşım örneğin kategori sistemim var ve adminden kategori ve alt kategori eklendikçe otamatik olarak bu kodlaırn içine nasıl bir döngü ile import edebiliriz ?
Üstad eline sağlık mükemmel bir çalışma olmuş düşlediğim yazılım açıkçası bir web sitesi kalıbı tasarlıyorum menu konusunda çok fazla içerik olduğunda aşşağıya doğru uzun bir liste olmaması için bu scripti kullanmak istedim fakat başarılı olamadım eğer yardım edebileceksen samet_bicen@hotmail.com.tr adresinden benimle iletişime geçersen çok memnun olurum çalışmalarınızda başarılar.
Merhaba Aycan Kardeş;
Bloğun;
1 artısı
1 eksiği
var
Bunlar;
1: Blog Tasarım Güzel Olmuş
2: Konu Başlıklarından Hiç Bir Şey Anlamadım
hocam merhabalar ben jquery açılır menüyü uyguladım fakat firefoxta açınca saçmalıyor internet explorer de hiç bir sorun yok neyden kaynaklanıyordur bu sorun sizce ?
Css z-index ayarından saçmalıyor @Mehmet 🙂
dikey açılır menulerde 3 veya 4 ncü alt menuler nasıl kontrol edilir
1. a
11.aa
111.aaa
1111.aaaa(11 in üzerinde iken bu menunün açılmaması içn ne yapmalıyım?
2222.aaaa
222.bbb
22.bb
33.cc
2. b
3. c
teşekkürler
hocam ellerinize sağlık menü çok güzel kullanıyorum fakat bir sorum olucak açık olan menü başlığına tekrar tıklandığında o menünün altmenülerinin kapanmasını nasıl sağlarız ?
merhaba bi sorum var:Ben çocuk düğüme bir alt düğüm ekelemek istendiğinde cssden bir alt düğüm içinde display ayarlarını yapmam yeterlimi jquery tarafındada birşey yapmak gerekirmi.
Hocam ben şu sitedeki sayfalama şeklindeki menüyü istiyorum nasıl bulabilirim. Teşekkürler.
sunoyun.com/Yil-Basi-Tatlilari-Oyna-4ef8c5091a237.html
Bu sayfanın alt kısmında tavsiye et yorumlar gibi açılabilir menüden.
hocam
bu jQuery Dosyamızı yazalım
demıssın
onu nereye eklıyoruz
harıcı bır dosyaysa ana dosyaya nasıl baglıyoruz bır aydınlatırsan sevınırım
teşekkürler
Jquery dosyasını oluşturup içine kodlarımızı yazıyoruz demek istedim
hatta sen bunları zipleyip siteye koysan ne süper olur bir bilsen 🙂
http://calismalar.aycan.net/rar/jquery-acilir-menu.rar buyur : )
2. child nasıl ekleyebiliriz?
teşekkürler
Merhaba çok eski bir sistem bu, güncel versiyonunu güzel bir tasarım bulursam yakında yazacağım.
Öncelikle emeğiniz için teşekkürler Yalnız Yaptığım menünün altında slider var z-index veya position ayarlarıylane kadar oynadımsa sliderin üztünde göstermeyi başaramadım.
Ön izleme gösterebilirseniz yardımcı olmaya çalışırım
Çalışmalarınız gerçekten çok güzel olmuş..!
meraba yine ben senden bana dönem ödevimde yardımcı olmanı rica edebilirmiyim 8) öğretmen jQery tabbet sekmeli panel uygulaması hakkında kodlarda dahil araştırma yapmamızı istedi ama yeterli açıklama bulmakta zorlanıyorum eğer bu konu hakkında bilgin varsa lütfen yardım edermisin 🙁
Merhaba,
http://www.aycan.net/jquery-tab-kontrol-tab-menu-uygulamasi/ bundan mı bahsediyorsunm?
Linklere tıklayınca Menü komple kapanıyor. Ne yapmalı ki en üstteki sizin örnekte ‘Aycan.net’ e tıklamadan menü komple KAPANMASIN..
teşekkürler