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
