Mootools çalışmalarımda sıkça kullandığım ve çokta sevdiğim bir Javascript kütüphanesidir. Basit ve esnek yapısı sayesinde birçok dinamik web ögesini Mootools ile oluşturabilirsiniz. Ben bu makalemizde Mootools’un Akordion özelliğini kullanarak nasıl bir Akordion menü yapacağımızı anlatacağım. Yazımızın sonunda (ve gönderi yanındaki resmimizde de) yapmış olduğumuz menüye ait önizlemeyi görebilir dilerseniz de bilgisayarınıza indirip kullanabilirsiniz.

Herşeyden önce başlıktada belirttiğimiz gibi biz bu menüyü Mootools kütüphanesini kullanarak oluşturacağız. O yüzden Xhtml dokümanımızda öncelikle Mootools’u çağıracak olan kodu yazıyoruz. Bu sayede sayfamız Mootools betiğini okuyacak ve işlemi buna göre yapacaktır. Bu kodları Head bölümüne yazıyoruz.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/akordion.js"></script>

Sonrasında menümüzü görsel anlamda şekillendirecek olan stil dosyasını tanımlıyoruz. Stil dosyasında menümüzün ana birimleri ve alt birimlerinin stilleri yer alıyor.

<link rel="stylesheet" href="style/style.css" type="text/css" />

Bu aşamadan sonra Body etiketi içinde sayfamızda menümüzü göstermek istediğimiz yerde menümüzün ana Xhtml kodlarını giriyoruz. Bu aşamadan sonra menümüz görünecek ve kullanıma hazır hale gelecektir.

<div id="accordion">
	<h3 class="toggler"><a href="#" class="anasayfa">Anasayfa</a></h3>
	<div class="element">

	<ul>
	<li><a href="#">Hakkımızda</a></li>
	<li><a href="#">Atölye</a></li>
	<li><a href="#">Tavsiyeler</a></li>
	<li><a href="#">İletişim</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="kategori">Kategoriler</a></h3>
	<div class="element">
	<ul class="kategori">
	<li><a href="#">Ajax</a></li>
	<li><a href="#">Photoshop</a></li>
	<li><a href="#">Dreamweaver</a></li>
	<li><a href="#">Xhtml/Css</a></li>
	<li><a href="#">Php/Mysql</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="baglanti">Bağlantılar</a></h3>
	<div class="element">
	<ul class="link">
	<li><a href="#">Mootools</a></li>
	<li><a href="#">Google</a></li>
	<li><a href="#">Adobe</a></li>
	<li><a href="#">Facebook</a></li>
	<li><a href="#">Twitter</a></li>
	<li><a href="#">FrienFeed</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="besleme">Rss Takip</a></h3>
	<div class="element">
	<ul class="rss">
	<li><a href="#">Son Gönderiler</a></li>
	<li><a href="#">Son Yorumlar</a></li>
	</ul>
	</div>

</div>

Menünün işleyişi hakkında kısa bir bilgi vermek istiyorum. Menümüzü çağıran ve akordion fonksiyonunu tanımlayan akordion.js dosyasında Mootools’dan yararlanılarak h3 etiketiyle ilişkili bir Css sınıfı oluşturuluyor. Bu sınıf toggler özelliğini kullanarak menü biriminin aşağı doğru açılmasını sağlıyor. H3 etiketi başlık olarak kullanılıp tıklandıktan sonra aşağıda yer alan menü birimi gösteriliyor. Menü biriminin görüneceği alanda yine bir Css sınıfı olan .element işin içine giriyor ve tıklandıktan sonra açılan alanda .element sınıfına ait veriler gösteriliyor. Menünün ana görünümü başlatmak içinse #Akordion isimli div id’si yazılıyor. Menünün genişliğini bu alanda sınırlayabilirsiniz.

Menünün kodları içinde (ister Xhtml ister stil) istediğiniz kadar değişiklik yapabilirsiniz. Menü stil dosyasında ben birçok ekleme yaptım ve yan taraflarına da bir takım kısa açıklamalar yazdım. Bu da sizin için faydalı olacaktır.

AKORDİON MENÜ ÖNİZLEME AKORDİON MENÜ İNDİR (36kb)

Rastgele Yazılar