Basit jQuery Uygulamaları Yazıyoruz : Akordiyon Menü Yapımı
Merhaba Arkadaşlar,
Eğitim serimizin sıradaki başlığı için bu uygulamamızda akordiyon menü yapımını göreceğiz. En kısa şekilde bu menü biçimini anlatmak gerekirse; Web sitelerinde menü bileşenlerinin üzerine mouse imlecini getirdiğimizde bazılarının alt menü başlıklarının da bulunması sebebiyle karşımıza bir açılır menü görüntüsü çıkmaktadır . İşte ben de sizlere bu tarz bir işlemin nasıl yapılacağını göstereceğim.
Uygulamamıza başlarken tüm dosyalarımızı tutmak için ilk olarak bir klasör açıyoruz. İçerisine ” index.html ” isimli bir klasör yaratıyoruz. ” www.jquery.com ” adresi içerisinden son sürüm jQuery kütüphanesini indirerek oluşturduğumuz bu klasör içerisine kaydediyoruz.
İndirme işlemlerimiz tamamlandığına göre artık HTML sayfamızı bir metin editörü ile açarak kodlama işlemine geçebiliriz. Sayfamıza indirdiğimiz jQuery kütüphanemizi çekiyoruz ve menü listemizi oluşturuyoruz. Sayfamızın en sade görünümünün verileceği kod blogu şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Ürünlerimiz</a></li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
Bu şekildeki bir sayfayı tarayıcımızda görüntülediğimizde amacımıza hiç bir şekilde uygun olmayan bir görüntü karşımıza çıkacaktır. İlk olarak yapacağımız işlem CSS ile bu menüyü yatay bir hale getirmek ve margin , padding gibi değerlerin ardından liste elemanları içerisindeki linklerin arkaplan renklerini ve :hover efekti sırasındaki arkaplan renklerini vermek olacaktır. HTML sayfamızın şimdiki hali şu şekilde olacaktır :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#menu li{float: left;}
#menu li a{padding: 15px; text-decoration: none; color: #000; font-weight: bold; background: #ccc;}
#menu li a:hover{background: #ddd;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Ürünlerimiz</a></li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
İşte şimdiki görüntümüz bizim için yeterli olacaktır. Bu yatay menü içerisinden kendimize bir bileşen seçerek buna açılır menü efektini uygulayacağız. Bu 5’li içerisinden bize en uygun görüntüyü verecek bileşen sanırım ” Ürünlerimiz ” olacaktır. bir bilgisayar firmasının web sayfasını kodladığımızı düşünürsek ürünlerimizin açılır menüsünde ” Notebook ” , ” Kasa ” , ” Monitör ” seçenekleri yeterlidir.
Yapacağımız işlem ” Ürünlerimiz ” in kod bölümündeki yerinde
bölümü kapanmadan yeni bir ul oluşturmaktır. Bunu li kapanmadan hemen önceye yerleştiriyoruz. Gittikçe genişleyen kod bölümünün son hali şu şekildedir :
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#menu li{float: left;}
#menu li a{padding: 15px; text-decoration: none; color: #000; font-weight: bold; background: #ccc;}
#menu li a:hover{background: #ddd;}
#menu li ul{margin-left: -40px;}
#menu li ul li{float: none; list-style-type: none;}
#menu li ul li a{display: block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Ürünlerimiz</a>
<ul>
<li><a href="#">Notebook</a></li>
<li><a href="#">Kasa</a></li>
<li><a href="#">Monitör</a></li>
</ul>
</li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
Tarayıcıdaki düzgün görüntüsünü aldıktan sonra CSS bölümünde ” #menu li ul ” içerisine ” display:none ” değerini ekleyerek ilk açılışta görüntülenmesini engelliyoruz.
Şimdi yapacağımız işlem ile makalenin sonuna gelmiş olacağız. Mouse imlecini ” Ürünlerimiz ” üzerine getirdiğimizde açılır menünün aktif olmasını sağlayacağız. Uygulamamızın çalışır haldeki son kod bölümünü paylaşıyorum ve daha sonra da jQuery kodları ile alakalı küçük bir açıklama satırı ile bu makaleyi sonlandırıyorum.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#menu li{float: left;}
#menu li a{padding: 15px; text-decoration: none; color: #000; font-weight: bold; background: #ccc;}
#menu li a:hover{background: #ddd;}
#menu li ul{margin-left: -40px; display: none;}
#menu li ul li{float: none; list-style-type: none;}
#menu li ul li a{display: block;}
</style>
<script>
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).find("ul").css({"display":"block"});
},function(){
$(this).find("ul").css({"display":"none"});
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Ürünlerimiz</a>
<ul>
<li><a href="#">Notebook</a></li>
<li><a href="#">Kasa</a></li>
<li><a href="#">Monitör</a></li>
</ul>
</li>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</body>
</html>
etiketleri arasında dikkat etmemiz gereken nokta ” find ” olacaktır. Bu özellik bize menü içerisindeki li elemanlarına :hover efekti uygulandığında bir ul aramamızı sağlamaktadır. Eğer bu liste elemanı içerisinde bir ul var ise bunun css değerini ” display:block ” olarak değiştirerek görünür hale getirmektedir.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 37 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar