İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | JavaScript | Hızlı Aşağı Açılır (Drop-down) Menü

Diğer Yazılar
E-Posta Takibi


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:5438Güvenlik Kodu:5438Güvenlik Kodu:5438Güvenlik Kodu:5438




En Son Okunan 10 Makale
  1. Zaman Yönetimi
  2. Yüksek Lisans Çalışmaları
  3. Fotoğraf Çekim Teknikleri
  4. Deniz Yıldızı
  5. Tasarımın Sonumu Geldi (2)
  6. B2C Nedir?
  7. Programlamanın Taosu
  8. Nasıl Bir Yöneticisiniz?
  9. PHP ye Giriş 2
  10. Kullanılabilirlik
 
Hızlı Aşağı Açılır (Drop-down) Menü>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

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

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



Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Şahika Tabak
Son Güncelleme : 14 Mayıs 2005, Cumartesi
Sayfa Sürümü : 1
Okunma Adedi : 16,902
Son Okunma : 2017-07-22 11:19:20
Kaynaklar : http://www.bthayat.net/site/yazi_goster.php?id=176

Hızlı Aşağı Açılır (Drop-down) MenüE-Posta Takibi
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 3 kişi çevirimiçi | Bugün =128 | Dün =213 | Bu Ay=4,938 | Günlük En Fazla=1,109 tekil ziyaretçi