Site tasarımında menü yapımı için birçok yol mevcut. Biraz program bilginiz varsa Photoshop‘tan yararlanabilir, web 2.0 örneklerini inceleyebilir ve uygulayabilir, çeşitli üreteçlerden faydalanabilir (CSS Menü Üreteci, Tab Menü Üreteci), hazır uygulamaları tasarımınıza ekleyebilir ya da sadece bunun için yazılmış ücretsiz bir program olan CSS Tab Designer‘ı kullanabilirsiniz. Bu yollar haricinde karşılaştığım en güzel yol ise IzzyMenu. Bu yazıda ilgili siteyi tanıtmaya çalışacağım.

Az önceki giriş değindiğim bağlantılarda menü üzerine yazdığım yazılarıtekrar hatırlatmaya çalıştım. Ancak bence IzzyMenu bunlar içinde en iyisi. Hem uygulama açısından kolay (birazdan basit bir dille anlatmaya çalışacağım) hem de çeşitlilik yönünden oldukça zengin.

Sitenin girişinde gördüğünüz üzere sol bölümde menümüz ile ilgili çeşitli ayarlamaları gerçekleştiriyoruz. Yapacağınız menünün yüksekliği, genişliği; kullanacağınız yazı tipini; çerçeve olup olmayacağını; menünün dikey veya yatay konumlandırılacağını bu bölümden düzenliyorsunuz. Yine sol üst bölümden alt menü ekleme işlemini ve link görünümünü belirleyebilirsiniz. Sağ bölümde de menünüzün neye benzediğini görüyorsunuz. Hemen üst bölümde “Menu Structure” sekmesinden menünüzdeki bağlantıların adreslerini düzenleyebilirsiniz. “Menus Catalogue” bölümünden ise onlarca menüye ulaşabilir tasarımınızla uyum gösterecek menüyü seçebilirsiniz. Ayrıca sisteme kayıt olup kendi menü tasarımlarınızı oluşturma şansınız da var.

Az da olsa html ve css bilenlerin menü kullanımında bir sorun yaşayacağını zannetmiyorum. Fakat bu konuda kısmen bilgisiz okuyuculara da yardımcı olmak açısından yaptığınız menüleri sitenize nasıl yerleştireceğinizi anlatmaya çalışacağım.

1. ADIM
Öncelikle seçimini yaptığınız menü üzerindeki değişikliklerinizi tamamlayın ve altta bulunan “Generate!” düğmesine tıklamayı unutmayın. Beğendiğiniz bir menüyü “Download” linki ile bilgisayarınıza indirin ve zip dosyasından çıkarın.

2. ADIM
Zip dosyasından çıkardığınız IzzyWebsite CMS, chrome, IzzyMenu ve images isimli 4 farklı dosya ve klasörden sadece IzzyMenu ve images bizim işimize yarayacak, diğerlerini silebilirsiniz. IzzyMenu menünün önizlemesini gerçekleştirebileceğiniz html formatında bir dosya. Menünün kodlarını alma için dosya üzerinde sağ tıklıyoruz ve “sayfa kaynağını göster” veya “kaynak kodları görüntüle” seçeneğine giriyoruz.

Burada küçük bir tavsiyede bulunmak istiyorum. Eğer kodlar ile ilgili çalışmalar yapmak istiyorsanız Notepad++ isimli açık kaynak programı kullanmanızı öneririm.

3. ADIM
Kaynak kodlar içerisinde <style> etiketiyle başlayıp yine </style> ile sona eren bölüm bizim css kodlarımız. Bu kodları (style bölümleri hariç) kopyalıyor ve kullanacağımız tasarımdaki css kodlarına ekliyoruz. Yani örnek vermek gerekirse;

...
</head>

<style>
/* CSS Document */

body {
background:url(fretless_as.PNG) center;
background-attachment: fixed;
font-family:”Bookman Old Style”, Times, serif;
font-size:14px;
padding:5px;
}
…

şeklinde kodlarınız olduğunu varsayalım. Burada az önce bahsettiğim menü css kodlarını

başlangıç etiketinin hemen arkasına yapıştırabilirsiniz. İkinci olarak html kodlarımız var. Yine kaynak kodlar arasında benim seçtiğim menünün kodları,

<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="#" mce_href="#"><span>Ana Sayfa</span></a></li>
<li><a href="#" mce_href="#"><span>Hakkinda</span></a></li>
<li><a href="#" mce_href="#"><span>Arsiv</span></a></li>
</ul>
</div>
</div>

şeklinde görünüyor. Muhtemelen sizin seçtiğiniz menüde de aynı şekildedir. Bu kodları da menü yerleştirmek istediğimiz bölüme yapıştırıyoruz tahmin ettiğiniz gibi. Yalnız burada az da olsa html kodlarının ne işe yaradığını bilmeniz gerekiyor. Bu kodlar ile ilk defa karşılaşan okuyucuların pek de verimli neticeler alacağını zannetmiyorum. Ancak yine de deneme yanılma yöntemiyle çözülebilir basitlikte. Gördüğünüz kodlarda eğer site üzerinden bağlantı verme işlemi yapmadıysanız # gelen yerlere bağlantıların adreslerini vermeyi unutmayın. Basit html ve css ilişkisini Blogcu için Şablon Uyarlama yazısında daha detaylı anlattığımı sanıyorum. Çözmekte zorlananlar inceleyebilir.

Ayrıca IzzyMenu’de Türkçe karakter problemi yaşayabilirsiniz, Türkçe’ye özgü harfleri kodları düzenlerken kullanırsanız bu sorun düzelecektir.

Sitede hem yatay, hem de dikey menü tasarımına olanak verildiği için indirdiğiniz dosyalar arasında her ikisine ait imaj dosyaları mevcut. Eğer dikey şekilde kullanacaksanız yatay olana ait kodu csste silmeniz gerekiyor. Umarım yararlanacağınız bir yazı olmuştur.