Bir menümüz var diyelim, kullanıcı herhangi bir elemana tıkladı ve o sayfaya gitti. Kullanıcının nerede olduğu göstermek için menüden ilgili bölümü işaretlememiz yada bir şekilde belli etmemiz gerekiyor. Yada bir kategori menümüz var ve kategorilerin alt kategorileri şeklinde de bir hiyerarşimiz bulunuyor, kategori seçildiğinde altındaki diğer kategorileride belli etmemiz gerekiyor. İşte bu tip seçme durumlarında jQuery ile işimizi çok basit bir şekilde görüyoruz. Bunu asp, php vb.. dillerle yapmak için heleki menü dinamik oluşmuyorsa kaç satır yazmanız gerekiyor tahmin bile edemiyorum, basit bir hesapla menüdeki eleman sayıları kadar, yani çOOook. Lafı uzatmadan örneklerimize geçiyoruz. Unutmadan buradaki ve buradaki hareketlere göz atmanızda fayda var ;)

<div class="ornekMenu">
        <h1>Örnek 1</h1>
        <ul>
            <li><a href="?link=kategori1">kategori 1</a></li>
            <li><a href="?link=kategori2">kategori 2</a></li>
            <li><a href="?link=kategori3">kategori 3</a></li>
            <li><a href="?link=kategori4">kategori 4</a>
                <ul>
                    <li><a href="?link=kategori6">alt kategori 1</a></li>
                    <li><a href="?link=kategori7">alt kategori 2</a></li>
                    <li><a href="?link=kategori8">alt kategori 3</a></li>
                </ul>
            </li>
            <li><a href="?link=kategori9">alt kategori 5</a></li>
        </ul>
    </div>

    <div class="ornekMenu2">
        <h1>Örnek 2 <small>alt kategorileride seçme</small></h1>
        <ul>
            <li><a href="?link=kategori1">kategori 1</a></li>
            <li><a href="?link=kategori2">kategori 2</a></li>
            <li><a href="?link=kategori3">kategori 3</a></li>
            <li><a href="?link=kategori4">kategori 4</a>
                <ul>
                    <li><a href="?link=kategori6">alt kategori 1</a></li>
                    <li><a href="?link=kategori7">alt kategori 2</a></li>
                    <li><a href="?link=kategori8">alt kategori 3</a>

                        <ul>
                            <li><a href="?link=kategori10">alt alt kategori 1</a></li>
                            <li><a href="?link=kategori11">alt alt kategori 2</a></li>
                            <li><a href="?link=kategori12">alt alt kategori 3</a>
                                <ul>
                                    <li><a href="?link=kategori13">alt alt alt kategori 1</a></li>
                                    <li><a href="?link=kategori14">alt alt alt kategori 2</a></li>
                                </ul>
                            </li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a href="?link=kategori9">alt kategori 5</a></li>
        </ul>
    </div>

Yukarıda 2 tane menümüzün var, tıkladığımız elemana gitmek için aşağıdaki kodlarımızı yazıyoruz. Unutmadan aşağıda ki kodda parametre değişkenin karşısına dinamik olarak da querystring değerini alabiliriz ;)

    <script type="text/javascript">
        $(document).ready(function () {

            //---- buraya dinamik olarak querystringi ekleyebilirsiniz. eğer eklerseniz aşağıdaki getQuerystring fonksiyonunu silebilirsiniz.
            var parametre = "?link=" + getQuerystring("link");

            //----------------------------------------------------------------------
            $(".ornekMenu ul li a[href^='" + parametre + "']").css({ backgroundColor: 'red', color: 'white' });

            //-----------------------------------------------------------------------------------
            $(".ornekMenu2 ul li a[href^='" + parametre + "']").each(function () {
                var t = $(this);
                var style = { backgroundColor: 'red', color: 'white' };
                t.css(style);

                if (t.parent().find("ul").length != 0) {
                    t.parent().find("ul").css(style);
                }

            });

        });

        function getQuerystring(key, default_) {
            if (default_ == null) default_ = "";
            key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
            var qs = regex.exec(window.location.href);
            if (qs == null)
                return default_;
            else
                return qs[1];
        }
    </script>

Örneklerin Demosu buradan bakabilirsiniz. Çok zevkli bir yazı oldu, umarım faydalı olur. Bir hatırlatma yapayım; bu tür yazılarda asıl öğrenmeniz gereken işleyişin mantığı, yoksa bu kodları ezberlemenin yada yöntemi ezberlemenin size katacağı hiç bir şey yok, sadece anlık probleminizi çözersiniz o kadar !

Basit bir açılır menü (drop down) nasıl yapılır, mantığı nasıldır bunu anlatmaya çalışacağım. Bu örnekteki açılır menü, üzerine tıklandığında açılıyor, basit bir değişiklikle üzerine gelindiğinde de açılmasını sağlayabilirsiniz.

Hemen html ve css kodlarımıza bir bakalım.

<style type="text/css">
body{font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;background-color:#3c3c3c;}

h1{
    text-shadow:0 1px 1px #575656;
    font-size:50px;
    color:#d1d1d1;
    margin:0
}

.container{width:500px;}

.dd{
    border:1px solid #575656;
    padding:5px;
    background:#e9e9e9 url('images/arrow.png') top right no-repeat;
    color:#4d4d4d;
    cursor:pointer;
    font-weight:bold;
}
.dd:hover{color:Black;}

.dd ul{
    position:relative;
    background-color:#e9e9e9;
    list-style:none;
    margin:5px;
    padding:0;
    display:none;
    font-weight:normal;
}

.dd ul li{border-bottom:1px solid #c0c0c0;font-size:14px}
.dd ul li a{color:#4d4d4d;text-decoration:none;display:block;padding:5px;}
.dd ul li:last-child{border-bottom:none}
.dd ul li:hover{background-color:#c0c0c0;border-bottom:1px solid #a8a8a8}

</style>
<div class="container">
    <div class="dd">
        Select item
        <ul>
            <li><a href="#">İtem 1</a></li>
            <li><a href="#">İtem 2</a></li>
            <li><a href="#">İtem 3</a></li>
            <li><a href="#">İtem 4</a></li>
            <li><a href="#">İtem 5</a></li>
        </ul>
    </div>
</div>

Görüldüğü üzere menümüz bir div ve ul elementinden oluşuyor. Şimdi aşağıdaki resim üzerinden incelememize başlayalım.

Mavi renkte ki alan, menümüzü kapsayan div imiz. (class="dd")
Kırmızı renkteki alan ise, içerisinde menü elemanlarımızın bulunduğu listemiz (ul). Listemizin css ayarlarından display değerini none yapıyoruz ki ilkten görüntülenmesin. Bu işlemden sonra aşağıdaki gibi bir görünüm elde ediyoruz.

Buradan sonraki iş jQuery nin, yapacağımız olay ise şu. Mavi renkteki dive tıklandığında, yukarıda gizlediğimiz listeyi göstereceğiz. Tekrar tıklandığında ise listeyi gizleyeceğiz. Kodlarımıza bakalım.

<script type="text/javascript">
    $(document).ready(function() {
        $(".dd").click(function() {
            $("ul", this).slideToggle("fast");
            $(".dd").mouseleave(function() {
                $("ul",this).hide("fast");
            });
        });
    });
</script>

Kodlarımızı inceleyelim.

• $(".dd").click(); Class değeri .dd olan elementi yakalıyor ve .click fonksiyonunun içine istediğimizi yazıyoruz. Eğer üzerine geldiğince listenin açılmasını istiyorsanız .hover() fonksiyonunu kullanabilirsiniz.
• $("ul", this).slideToggle("fast"); bizim istediğimiz olay gizlediğimiz listeyi ortaya çıkartmak, bunun için slideToggle() fonksiyonunu kullanıyoruz. Burada ki seçicimiz şöyle çalışıyor. this tıkladığımız elementin kendisi yani .dd, ul ise .dd nin içerisindeki elementimiz. Okunuşu şöyle .dd nin içerisindeki ul yi slideToggle() yap
• $(".dd").mouseleave(); bu satırda mouse .dd üzerinden ayrıldığında menümüzü kapatmak için kullanıyoruz. Burada kırmızı renkteki kısım hakkında bir bilgi vermek istiyorum. Kırmızı renkteki alanımız listenin görünmesiyle billikte aşağı doğru genişliyor, yani mouse listemizin üzerindeyken aynı zamanda .dd nin de üzerinde olmuş oluyor. Çoğu menü bu prensibe göre çalışıyor, bu sebepten dolayı modern menülerde ki hiyerarşinin aşağıdaki örnekte ki gibi olduğunu göreceksiniz.

<ul>
    <li>menü eleman 1</li>
    <li>menü eleman 2
        <ul>
            <li>alt eleman 1</li>
            <li>alt eleman 2</li>
            <li>alt eleman 3</li>
        </ul>
    </li>
    <li>menü eleman 3</li>
    <li>menü eleman 4
        <ul>
            <li>alt eleman 1</li>
        </ul>
    </li>
</ul>

Eğer dikkatle incelerseniz alt elemanlara sahip li ler alt elemanı kapsıyor, yani li nin altında ki ul lere eleman geldiğinde yukarda ki li nin de üzerine gelmiş oluyor. Bu sayede gösterme gizleme gibi işlemleri çok rahat ve stabil bir şekilde yapabiliyoruz. Örneğe bakarsanız demek istediğimi daha iyi anlayacaksınız. Bu durumu iyice kavrarsanız kendi menülerinizi rahatlıkla yapabilirsiniz.

Çalışan örneği  buradan indirebilirsiniz. Bir kaç örnek yaparak olayı çok daha iyi kavrayabilirsiniz. Umarım faydalı bir yazı olmuştur..

Ne garip bir isim oldu yav, göster – gizle :) Neyse jQuery ile basit bir menü örneği. Önizlemesine buradan bakabilirsiniz.

<script type="text/javascript">
	$(document).ready(function(){
		$(".panel span").click(function(){
			var t = $(this);
			if(t.text() =="Göster")
			{
				t.text("Gizle");
			}
			else
			{
				t.text("Göster");
			}
			$(".panel .menu").toggle('fast');
		});
	});
</script>

Sürekli site açılış
haberi verecek değilim :) Şimdi ki yazımda jQuery ve css ile basit bir yatay
açılır menünün nasıl yapılacağına göz atacağız. Başlangıç noktasında ul ve li
etiketlerinden bir hiyerarşi yaratıyoruz. Eğer kodumuza bakarsak yapıyı rahatlıkla anlayabiliriz, bir nevi ağaç yapısı.

	<ul>
		<li><a href="">Deneme</a></li>
		<li><a href="">Deneme</a>
			<ul>
				<li><a href="">asdasd</a></li>
				<li><a href="">fasdfasdf</a></li>
				<li><a href="">asdfasdf</a></li>
			</ul>
		</li>
		<li><a href="">Deneme</a></li>
		<li><a href="">Deneme</a>
			<ul>
				<li><a href="">sdafasgdasdf</a></li>
				<li><a href="">sdgsadf</a></li>
				<li><a href="">sdfsdfasd</a></li>
			</ul>
		</li>
		<li><a href="">Deneme</a></li>
	</ul>

Sonrasında css ile birlikte biçimlendirmemizi yapıyoruz. Buradaki önemli olan nüans ikinci seviyedeki ul etiketlerini
display:none yaparak ilk etapta görünmemesini sağlamak sonrasında da
position:absolute ile pozisyonunu sabitliyoruz.

    body{font-family:Verdana,Helvetica;font-size:11px;background-color:#333}
	.menu{}
	.menu ul{list-style:none;padding:0;margin:0}
	.menu ul li{float:left;padding:5px;margin:2px;}
	.menu ul li a{color:White;text-decoration:none;font-weight:bold;}
	.menu ul li:hover{background-color:#5a5a5a}

		.menu ul li ul{display:none;position:absolute;}
		.menu ul li ul li{float:none;border-bottom:1px solid #ededed}
		.menu ul li ul li:hover{border-bottom:1px solid #5a5a5a;background-color:Transparent}

En son işlem olarak da jQuery ile üzerine gelinen li nin altında bulunan ul nin görünmesini sağlamak. Neden bu ul görünmüyordu çünkü css de displayını none yapmıştık ;) Koda
baktığımızda gayet basit bir mantığın olduğunu göreceksiniz. Daha değişik açılma
efektleri için
jQuery’ nin efekt kategorisine göz atabilir ve rahatlıkla
uygulayabilirsiniz. Burada aklıma gelmişken projenize

jquery.js yi eklemeyi unutmayın ;)

 $(document).ready(function() {
        $("#menu1 ul li").hover(
            function() {//mouse üzerindeyken çalışacak fonksiyonumuz. (mouseover)
                $("ul", this).slideDown("fast");
        },
            function() {//mouse üzerinde değilken çalışacak fonksiyonumuz. (mousout)
                $("ul", this).slideUp("fast");
        });
    });

Aşşağıda ki örneklerde menülerin farklı şekillerde nasıl çalıştığını görebilir ve kaynağı görüntüleyerek kodları alabilirsiniz. Bir yazının daha sonuna geldik, kalın sağlıcakla..

Bazı şeyler hep gözünüzün önündedir fakat aradığınızda bir türlü bulamazsınız, geçenlerde çok aramama rağmen bir türlü istediğim şekilde açılır menü (drop down menu) bulamadım. Dedim madem yok kendim yapmaya çalışayım, çat pat jQuery bilgimle kendimce bir menü yaptım, umarım işinize yarar. Çok basit jQuery ve css kodlarından oluşan bu menünün görüşünü istediğiniz gibi değiştirebilirsiniz. Dosyaların içerisinde .psd dosyası da bulunuyor.

Çok güzel bir menü navigasyonu olan bu script, orjinalinde PHP ile yapılmış. Bende ASP ye çevirdim. Kolay ve anşalır bir biçimde sizlerle paylaşmak istedim. Scriptin orjinal sayfası
http://labs.activespotlight.net/jQuery/menu_demo.html

Demo http://www.apostylee.com/scripts/FastFindMenu/
İndir http://www.apostylee.com/scripts/FastFindMenu/ffm.rar