Forum'da ara:
Ara


Yazar Mesaj
Mesaj01.09.2009, 20:21 (UTC)    
Mesaj konusu: Hızlı açılır menuler işinize yarayabilir


Aşağı açılır menüler hem web sayfalarında hem de intranet yazılımlarında çok sık kullanılan bir menü tipidir. Bu yazımızda olabildiğince sade bir kodla ve hızlı bir şekilde nasıl aşağı açılır menü yapabiliriz onu değineceğiz. Aşağı açılır menüler hem web sayfalarında hem de intranet yazılımlarında çok sık kullanılan bir menü tipidir. Bu yazımızda olabildiğince sade bir kodla ve hızlı bir şekilde nasıl aşağı açılır menü yapabiliriz onu değineceğiz.


Aşağı açılır menüler yanyana "Ana Başlıklar" ve her ana başlığa ait altalta farklı sayılarda "Alt Başlıklar" şeklinde tasarlanmaktadır.

Ana başlıklarımızı, bir küçük tablo içinde, her biri bir <td> hücresine gelecek şekilde tek bir <tr> satırına koyacağız ve her ana başlığa ait alt başlığı da ilgili <td>'nin içinde ana başlık adından sonra <br> ile devam edip yeni bir <table> açıp koyacağız.

Alt başlıkları oluşturan <table>'ler aynı zamanda bir <div> öğesinin içinde duracaklar ve bu div'lerin style özelliklerini style="visibility:hidden;position:absolute" şeklinde belirterek sayfa yüklendiğinde hemen görünmemelerini ve yerlerinin de sabit olmalarını sağlayacağız.

Her biri farklı bir id değere sahip olan bu <div>'lere içinde bulundukları <td> tagının onmouseover ve onmouseout tetikleyicileri ile müdahale edip görünüp görünmemelerini sağlayacağız. Böylece bir açılır menü efekti vermiş olacağız.

Teoriyi bir kenara bırakıp HTML kodumuzu görelim.

Ana başlıkların oturacağı tablo (sonra buna ek yapacağız):
Kod:
<table border=0>
<tr>
<td !tetikleyiciler_buraya_yazilacak >MENÜ 1<br>
<!-- alt başlıklar buradan başlayacak-->
<!-- alt başlıkların sonu -->
</td>
<td !tetikleyiciler_buraya_yazilacak >MENÜ 2<br>
<!-- alt başlıklar buradan başlayacak-->
<!-- alt başlıkların sonu -->
</td>
<td !tetikleyiciler_buraya_yazilacak >MENÜ 3<br>
<!-- alt başlıklar buradan başlayacak-->
<!-- alt başlıkların sonu -->
</td>
</tr>
</table>

Geriye ne kaldı? Belirttiğimiz alt başlıkları birer tablo şeklinde oluşturup, her tabloyu bir <div>'in içine koyup yukarıdaki tabloda belirttiğimiz açıklama satırları ile işaretli ilgili yerlere yerleştirmek ve bu alt başlıkların görünüp kaybolmasını sağlayacak onmouseover ve onmouseout tetikleyicilerini de yine yukarıdaki tabloda yerlerini belirttiğimiz <td>'lerin içine yazmak.

Bir alt başlık örneği:
Kod:
<div id="menu_3" style="visibility:hidden;position:absolute">
<table border=0 width="100" style="border:1px solid">
<tr><td><a href="#">3. İÇERİK 1</a></td></tr>
<tr><td><a href="#">3. İÇERİK 2</a></td></tr>
<tr><td><a href="#">3. İÇERİK 3</a></td></tr>
</table>
</div>

Bu örnek alt başlığı tetikleyecek <td> satırı şöyle olmalı:
<td style="cursor:default" onmouseover="GosterGizle('menu_3','visible')" onmouseout="GosterGizle('menu_3','hidden')" >MENÜ 3<br>
Burada, ilgili alt başlığı fare <td>'nin üzerine gelince gösterip, üzerinden çekilince gizleyecek olan GosterGizle() JS fonksiyonunu kullandık. Bu fonksiyonumuzun kodu şöyledir:
Kod:
function GosterGizle(id,gorunum)
{
document.getElementById(id).style.visibility=gorunum
}

Şimdi parçaları birleştirelim ve nihayi menümüzü görelim.
Kod:
<script language="Javascript">
function GosterGizle(id,gorunum)
{
document.getElementById(id).style.visibility=gorunum
}
</script>
<table border=0>
<tr>
<td style="cursor:default" onmouseover="GosterGizle('menu_1','visible')" onmouseout="GosterGizle('menu_1','hidden')" >MENÜ 1<br>
<!-- birinci alt başlık -->
<div id="menu_1" style="visibility:hidden;position:absolute">
<table border=0 width="100" style="border:1px solid">
<tr><td><a href="#">1. İÇERİK 1</a></td></tr>
<tr><td><a href="#">1. İÇERİK 2</a></td></tr>
<tr><td><a href="#">1. İÇERİK 3</a></td></tr>
<tr><td><a href="#">1. İÇERİK 4</a></td></tr>
</table>
</div>
<!-- birinci alt başlık sonu -->
</td>
<td style="cursor:default" onmouseover="GosterGizle('menu_2','visible')" onmouseout="GosterGizle('menu_2','hidden')" >MENÜ 2<br>
<!-- ikinci alt başlık -->
<div id="menu_2" style="visibility:hidden;position:absolute">
<table border=0 width="100" style="border:1px solid">
<tr><td><a href="#">2. İÇERİK 1</a></td></tr>
<tr><td><a href="#">2. İÇERİK 2</a></td></tr>
</table>
</div>
<!-- ikinci alt başlık sonu -->
</td>
<td style="cursor:default" onmouseover="GosterGizle('menu_3','visible')" onmouseout="GosterGizle('menu_3','hidden')" >MENÜ 3<br>
<!-- üçüncü alt başlık -->
<div id="menu_3" style="visibility:hidden;position:absolute">
<table border=0 width="100" style="border:1px solid">
<tr><td><a href="#">3. İÇERİK 1</a></td></tr>
<tr><td><a href="#">3. İÇERİK 2</a></td></tr>
<tr><td><a href="#">3. İÇERİK 3</a></td></tr>
</table>
</div>
<!-- üçüncü alt başlık sonu -->
</td>
</tr>
</table>

Menüyü güzelleştirmek, isterseniz tıpkı MS Office'nin nazik menüleri gibi yapmak artık size kalmış. Yalnız son bir noktaya değinmekte fayda var. Intranet yazılımınızda yada web sitenizde böyle bir menüyü oluşturmak için bizim burada yaptığımız gibi kodu "elle" yazmak pek akıllıca değildir. Çünkü ihtiyac halinde menüye ekleme çıkarma yapılması gerekebilir. Hatta Intranet için konuşursak; sisteminizi kullanan kişinin yetkisine göre menü içeriği dinamik olarak değişebilir. O zaman menümüzü demek ki elle oluşturmayacağız, dinamik olarak bir db'den yada dosyadan menü öğelerini çekip, PHP ile (yada kullandığınız sunucu tarafı dili ne ise onla) bu HTML+JS tabloyu oluşturacağız.

İyi çalışmalar..
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu