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

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

function GosterGizle(id,gorunum) { document.getElementById(id).style.visibility=gorunum }

Şimdi parçaları birleştirelim ve nihayi menümüzü görelim.

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