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: <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>