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 !