BİLGİ ŞEHRİ

Dreamweaver (DW) ile açılır menü 2 farklı yöntem ile oluşturulabilir.

1. Layer (Katman) kullanarak açılır menü oluşturma.  Önizlemesi
2. Pop-Up menü ile açılır menü oluşturma.

Bu yazıda dw ile Layer (katman) kullanarak açılır menü oluşturulması anlatılmıştır.  Aşağıda açılır menü oluşturma mantığı ve açılır menünün nasıl oluşturulacağı resimli olarak analtılmıştır. 

Layer Kullanarak Açılır Menü Oluşturmada Kullanılan Yöntem :

İlk olarak 2 tane layer oluşturulur. Bunlardan birisi ana menü için diğeri ise açılacak alt menü için kullanılacak. Ana menü için oluşturulan layer’ın içine 1 satır 1 sütun tablo yerleştirilir ve içerisine menü adı yerleştirilir.  Açılacak olan alt menüler için ise 1 sütun ve açılacak menü sayısı kadar satırdan oluşan tablo eklenir.

Alt menüler görünmez yapılır. Olaylar kullanılarak fare ana menü üstüne gelince alt menünün görünmesi sağlanır. Fare ana menünün üstünden gisince ise alt menünün görünmez olması sağlanır. Aynı şekilde fare alt menünün üstüne iken ve üstünde değilken alt menü gösterilir ve gizlenir. 

Dreamweaver’da Layer Kullanarak Açılır Menü Oluşturma :

• Ana menü ve alt menüler için iki tane layer oluşturulur. Layer oluşturmak için Layout menü gurubundan Draw Layer seçeneği kullanılır.

  

• Ana menü için üstteki layer’ın içine 1 satır 1 sütunluk tablo eklenir ve içerisine ana menü ismi yazılır (Bu örnekte resimler). Alt menü için alttaki layer içine 1 sütun ve menü sayısı kadar satırdan oluşan tablo eklenir.  (Bu örnekte doğa resimler ve komik resimler için 2 satır). Tablo eklemek için de layout menü gurubu kullanılır.
• Alt tarafta bulunan properties (özellikler) pencerisinden zemin ve yazı biçimlendirmeleri yapılır.

 

• Fare ile ana menü üstüne gelince alt menünün açılması için ana menüye olay eklenmelidir. Bunu yapmak için ana menünün olduğu layera bir kere tıklanarak layer seçilir ve Behaviors panelinden “Show-Hide Layer” seçeneği seçilir. 
• Karşımıza çıkacak pencereden hangi layer’ın gizlenip gösterileceğini soran bir pencere gelecektir. Layer isimleri Layer1 ve Layer2 şeklindedir. Layer ismini öğrenmek için layer seçili iken peoperties penceresine bakın. Bu örnekte ilk olarak ana menü layer’ı oluşturulduğu için ana menü ismi layer1 alt menü ismi layer2.
• Bu pencereden layer2 seçilir ve show (göster) butonu tıklanır). ok ile pencereyi kapatın.

•  Şu anda layer1 (ana menü) için layer2(alt menü) gösterilmesi olayı hazırlandı. Bu olayın ne zaman gerçekleşeceği yine behaviors penceresinden seçilir. Buradan istenilen olay seçilebilir. Bu örnekte fare ile menünün üstüne gelince alt menünün açılması isteniyor. Bu nedenle fare ile üstüne gelme olayı (onMouseOver)
  seçilmelidir.
• Şu anda fare ile ana menünün üstüne gelince alt menünün gösterilmesi sağlandı. Aynı yöntem kullanılırak fare ana menünün üstünden çekilince alt menünün gizlenmesi sağlanmalıdır.
• Bunun için yine ana menünün olduğu layer seçili iken behaviors panelinden show-hide layer seçeneği seçilir. Bu sefer gelen pencereden yine layer2 seçilir fakat bu sefer show (göster) seçeneği değil hide (gizle) seçeneği seçilmelidir. Bu seçenek için de behaviors panelinden fare gidince (onMouseOut) seçeneği seçilmelidir.
• Sonuç olarak layer1 (ana menü layer’ı) seçili iken behaviors penceresi aşağıdaki gibi olmalıdır.

• Şu ana kadar fare ile ana menü (layer1) üstüne gelince alt menünün (layer2) gizlenmesi ve  gösterilmesi işlemi yapıldı.
• Aynı işlem alt menü için de yapılmalıdır. Yani fare alt menünün (layer2) üstüne gelince alt menü gösterilmeli, fare alt menünün üstünden çekilince alt menü saklanmalıdır.
• Bu işlemi yapmak için yukarıda resimli olarak anlatılan işlemlerin aynısı layer2 seçili iken tekrarlanmalıdır. 
• Aynı işlemler layer2 için tekrarlandıktan sonra açılır menü olayları tamamlanmış olur. Son olarak başlangıçta alt menünün (layer2) görünmez olması sağlanmalıdır.
• Layer 2 ‘yi gizlemek için Layers panelinden göz resminin olduğu bölümden layer2′ye ait böşüm tıklanarak göz kapalı hale getirilir.

• Tablo içerisindeki yazılara link verilerek istenilen sayfalara bağlantı kurulabilir. Link vermek için common menüsünden hyperlink seçeneği kullanılır.

Not : İki layer arasında boşluk olursa ana menüden alt menüye geçerken alt menü görünmez olabilir. Boşluk olmassa ana menünün onmouseout olayı başlar başlamaz alt menünün onmouseover olayı başlayacağı için menü açık kalacaktır.