jQuery ile performans hareketleri – 3

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 ;)
Okumaya devam et jQuery ile performans hareketleri – 3

Bir açılır menünün anatomisi

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>

Okumaya devam et Bir açılır menünün anatomisi

jQuery göster – gizle menü

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>

jQuery ile yatay açılır menü yapımı (horizontal menu)

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..

jQuery ile Açılır Menu (Drop Down Menu)

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.

jquery css açılır menü (drop down menu)

FastFind Menu Script ASP !

Find Fast Menu ASP

Ç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