Horizontal Menü Örneği

Tekrar merhabalar t’infection okurları. Uzun süre önce sitemizde sizlere Xhtml/Css bir menü yapımını anlatmıştık. Bu menümüz Dikey (vertical) diye niteleyebileceğimiz bir menü tipindeydi. Bu makalemizde de çok fazla kod yığını olmadan basitçe bir menü yapımını anlatacağız. Yalnız bu sefer farklı şekilde horizontal yani yatay diyebileceğimiz bir menü olacak ve menümüzü iki adet küçük gif resimle destekleyeceğiz.

Gönderimizin üst tarafında görünen menüyü oluşturmak için gerekli olan şey sadece boş bir not defteri sayfası. Dilerseniz şimdi menümüzün kodlarını yazmaya başlayalım. Öncelikle açtığımız boş not defteri sayfasına menümüzün style dosyasını yazacağız. Lütfen aşağıdaki kodları alarak style.css adıyla kaydedin.

#menu {
width:600px;
height:40px;
background-image:url(menubg.gif);
color:#fff;
font:bold 14px arial, verdana, helvetica, sans-serif;
border:1px solid #999;
}

#menu ul {
list-style-type:none;
padding:0;
margin:0;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

#menu li a {
text-decoration:none;
color:#fff;
background:#333 url(menubg.gif);
padding:12px;
float:left;
}

#menu li a:hover {
color:#333;
background:#fff url(menuhover.gif);
text-decoration:none;
padding:12px;
float:left;
}

Dilerseniz style.css dosyamızda ne gibi kodlar yazdık biraz bunlardan bahsedelim. Öncelikme menümüzün oturacağı ana alan olan #Menu isimli div bölümünü yazdık. Burada menümüzün karakterini oluşturacak olan arkaplan resmi, yazıtipi, renk, yükseklik gibi bir takım bilgileri girdik.

Daha sonra menümüzün ögeleri için sıralama yaptıracağımız ul ve li etiketlerinin stillerini tanımladık. Burada ul ve li etiketlerini tanımlarken klasik menü kodlama biçimini kullandık. Li ve Ul etiketinin kullandığı liste stilini none yaparak liste menünün başında bir madde imi görünmemesini istedik.

Menümüzün can alıcı noktası olan #menu li a ve #menu li a:hover alanında ise menümüze görsellik verecek atamalar yaptık. Bağlantı rengi, bağlantı yüksekliği, arkaplan renk ve resmi gibi atamaları yaparak menümüzün bağlantılar üzerine gelindiğinde görüneceği hali belirledik. Css kodlarına baktığınız zaman a ve a:hover değerlerinde ne gibi değişimlerin yapıldığını görebilirsiniz.

Bu aşamadan sonra artık menümüzün Xhtml dosyasını yazmaya geldi sıra. Yine boş bir not defteri içine aşağıda yer alan kodları yazalım.

<div id="menu">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="index.html">Blog</a></li>
<li><a href="index.html">Hakkında</a></li>
<li><a href="index.html">Referanslar</a></li>
<li><a href="index.html">İletişim</a></li>
</ul>
</div>

Burada Css ile atamalar yaptığımız stilleri bir bir kullanarak menümüzün görünümünü şekillendirdik. Dikkat ederseniz Ul etiketiyle açtığımız bölüm içinde dilediğimiz kadar Li etiketi açabilir ve etiket içinde vereceğimiz bağlantılarla dilediğimiz kadar menü ögesi kazanabiliriz. (Klasik Html mantığı değil mi :)

Artık sayfamızı menu.html adıyla kaydedebiliriz. Menümüzün görüntüsü buradakine benziyor olmalı.

Unutmadan söylemek gerekir ki menümüzde bir takım arkaplan resimleri kullandık. Bu resimleri makalenin sonunda bulabilir ve bilgisayarınıza kaydedebilirsiniz. Resimleri menu.html, style.css ile aynı dizine atarsanız resimleriniz görünecektir.

Kullanmış olduğumuz menüde yapacağınız Padding, Background gibi parametrelerin değişimiyle çok farklı menü görünümleri elde edebilirsiniz.

Bu sayede geçerli xhtml ve geçerli css koduna sahip bir menümüz olmuş oldu. Umarım sizler için faydalı olmuştur.

Resimleri sağ tuş kaydet diyerek bilgisayarınıza alabilirsiniz.

Menünün çalışan hali için lütfen bu sayfaya göz atınız.

Rastgele Yazılar