Yeni bir jQuery makalemizde, sınırsız alt menü ve alt menü tasarım örneğini sizlere aktaracağız.

Yaptığınız tasarımlarda basit ve kullanışlı bir menü örneği yapıyoruz. Öncelikle uygulamamızın tasarımı için CSS kodlarını yazalım

CSS Betikleri

*{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;outline:none;}
body, html{font-family:'Arial', Helvetica, sans-serif;font-size:12px;color:#444;line-height:20px;background-color:#fff;}
.menu-kapsul {width:200px;margin:20px auto;}
.menu-kapsul ul{list-style-type:none;}
.menu-kapsul ul li{display:block;margin-left:10px;}
.menu-kapsul ul li a{color:blue;text-decoration:none;}
.menu-kapsul ul li span{display:block;line-height:20px;background:#e3e3e3;margin-bottom:1px;padding:0px 5px;}
.menu-kapsul > ul li ul{display:none;}



Şimdi ise jQuery kodlarımızı yazalım


jQuery Betikleri

$(document).ready(function () {
$(".menu-kapsul a").click(function () {
$(this).parent("li").children("ul").slideUp("slow");
if ($(this).next("ul").css("display") == 'none') {
$(this).next("ul").slideDown("slow");
}
});
});


HTML kodlarımızı yazalım

HTML Betikleri








Menü örneği için tıklayınız