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

<style>
        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*/
               .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;}
</style>

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');});
     });
 });

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

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

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

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

Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.(bakınız : slideUp)

$(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>

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>

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="https://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>
                        <li><a href="https://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>
                        <li><a href="https://www.r10.net/ajax/" title="Ajax">Ajax</a></li>
                        <li><a href="https://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="https://www.r10.net/google-adsense/" title="Google Adsense">Google Adsense</a></li>
                            <li><a href="https://www.r10.net/dmoz-ve-diger-dizinler/" title="DMOZ ve Diger Dizinler">DMOZ ve Diger Dizinler</a></li>
                            <li><a href="https://www.r10.net/ajax/" title="Ajax">Ajax</a></li>
                            <li><a href="https://www.r10.net/members/23775-aycanb.html" title="Profil : AycanB">Profil : AycanB</a></li>
                        </ul>
                </li>
            </ul>
        </div>

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

Resim :




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

———————
Bu makale AycanB tarafından Aycan.net yazılmıştır.
jQuery A
———————

iyi bir şekilde açıklamışsn aycan emeğine sağlık.

dün acaba nerde bulurum yatay ama açılır güzel bir menü diye araştırmaya başlamıştım. Teşekkür ederim çok güzel bir anlatım olmuş

arkadaşlar menüyü hemen kullanmaya başladım ancak bir sorunum oldu. Açılır menüleride hesaba kattığımızda 300 px h oluyo divde altında bir div daha eklediğimde 300px aşağıda kalıyor son eklediğim div. Bunu nasıl ayarlayabilirim.
Şekil a

Bunun için position absolute ve z-index kullanacaksıan yani şöyle

.menu ul{position: absolute; z-index:2;}
Aşşağıdaki div
.icerik {position: absolute; z-index:1;} böylece divleri katman katman ayırmış oluyoruz.

evet böyle düzeldi ancak yine bir sıkıntım oluştu. margin:auto; değerini yok saydı ve katmanı taşıdığım da kafasına göre bir yere taşıyor ancak ben tam ortalı olmasını istiyorum :S bi türlü düzeltemedim

Position:absolute kullanında top:15px; left:15px; right:15px; bottom:15px; gibi değerler vererek istediğin bir yere koyabilirsin o DIV'i eğer tarayıcılarda problem çıkyor diyorsan menunun bi üstündeki div e yani menuyu içine alan dive position:relative vererek o menuyu istediğin şekilde ana div ile menuyu ilişkilendirip o div içinde oynamalar yapabilirsin.

teşekkür ederim hocam cevabın için

teşekkürler paylaşım için hocam