Menümüzü oluştururken Css3′ün bir takım özelliklerinden de yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

XHTML
Her zaman olduğu gibi öncelikle Xhtml kodlarımızı yazarak uygulamamıza başlıyoruz.

<div id="menu">
<ul>

<li><a href="#" class="secim">Reşat Nuri Güntekin</a>
<ul>
<li><a href="#">Çalıkuşu</a></li>
<li><a href="#">Yaprak Dökümü</a></li>
<li><a href="#">Son Sığınak</a></li>
</ul>
</li>

<li><a href="#" class="secim">Halide Edip Adıvar</a>
<ul>
<li><a href="#">Sinekli Bakkal</a></li>
<li><a href="#">Ateşten Gömlek</a></li>
<li><a href="#">Vurun Kahpeye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Namık Kemal</a>
<ul>
<li><a href="#">İntibah</a></li>
<li><a href="#">Vatan Yahut Silistre</a></li>
</ul>
</li>

<li><a href="#" class="secim">Peyami Safa</a>
<ul>
<li><a href="#">Dokuzuncu Hariciye Koğuşu</a></li>
<li><a href="#">Fatih - Harbiye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Ömer Seyfettin</a>
<ul>
<li><a href="#">Kaşağı</a></li>
<li><a href="#">Başını vermeyen şehit</a></li>
</ul>
</li>

<br style="clear:both" />
</ul>
</div>

CSS
Menü görünümünü belirleyecek olan stil tanımlamalarını yapıyoruz.

#menu {
font:14px arial, verdana, sans-serif;
width:720px
}

#menu ul {
list-style:none;
margin:0;
background:#3ca0df url(menubg.gif) repeat-x bottom; /* menü arkaplan resmimiz tanımlanıyor. */
padding:5px;

/* Firefox, Chrome, Safari tarayıcılar için Border radius ve Shadow tanımları yapılıyor */

-moz-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-moz-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-khtml-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-khtml-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-webkit-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-webkit-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */
}

#menu li { /* menümüzün liste tanımı yapılıyor. */
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}

#menu a {
color:#fff;
text-decoration:none;
padding:4px;
display:block;
text-shadow:0px 1px 2px #000;
margin:0px 10px 0px 10px;
}

#menu a:hover {
color:#fff;
text-decoration:none;
padding:4px;
background:#333;
-moz-border-radius:3px; /* menü bağlantılarımıza küçük bir gölge efekti veriyoruz. */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

/* Alt menülerimizi gizliyor ve sonrasında alt menünün stil tanımlamalarına geçiyoruz. */

#menu li ul {
display:none; /* Alt menülerimizi gizliyoruz! */
position:absolute;
padding:0px;
margin:0px;
}

#menu li:hover > ul {
display:block; /* Alt menülerimiz #menu li üzerine fare ile gelinince görünecek şekilde hover ile gösterimini sağlıyoruz. */
position:absolute;
padding:0px 0px 0px 0px; /* margin ve padding değerlerini uygun şekilde ayarlıyoruz. */
margin:0px 10px 0px 10px;
width:150px;
left:0
}

/* Alt menü görünümünü değiştirecek olan stilleri yazıyoruz. */

#menu ul ul {
-moz-border-radius:4px; /* alt menümüzün köşelerini yuvarlıyoruz. */
-webkit-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
-khtml-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
width:150px;
margin:0px 10px 0px 10px;
border:1px solid #777;
}

#menu ul ul li {
display:block;
float:none;
}

#menu ul ul a { /* alt menü listemizin linklerini tanımlıyoruz. */
display:block;
font:14px/20px arial, verdana, sans-serif;
margin:0;
background:#888;
border-bottom:1px solid #777
}

#menu ul ul a:hover {
background:#f5cd14;
color:#fff;
}

jQUERY
Son olarak alt menünün slayt şeklinde görünmesi için küçük bir jQuery kodu ekliyoruz.

$(document).ready(function () {	

	$('#menu li').hover(
		function () {
			// #menu li üzerine gelince alt menümüzün SlideDown ile görünmesini sağlıyoruz.
			$('ul', this).slideDown(200);

		},
		function () {
			// imlecimiz ul üzerinden kalkınca alt menümüz SlideUp ile kapanıyor.
			$('ul', this).slideUp(200);
		}
	);

});

Neler Yaptık?
Kodlarımızı yazdıktan sonra kısaca neler yaptığımızı anlatmak istiyorum. Öncelikle Xhtml kodlarıyla basit olarak bir sırasız açılır menü (Unordered List) oluşturduk.

Css kodlarımızla tanımladığımız menü isimli id içinde menü görünümlerini ayarladık. Önce menü bağlantılarının görünümünü tanımladık. Alt menülerin görünümünü gizlemek için #menu li ul parametresine display:none değeri verdik. Böylelikle alt menüleri gizledik.

Sonrasında alt menülerin görünür hale gelmesi için #menu li:hover > ul bölümüne display:block değerini verdik. Böylelikle menü bağlantılarımızın üzerine gelince şayet bir alt menü içeriyorsa bu alan görünmeye başlayacak.

Bu aşamadan sonra menümüzün görünümüyle ilgili stilleri biraz daha genişlettik. Css3′ün Box Shadow, Text Shadow, Border Radius gibi özelliklerinden faydalandık. Bu parametrelerin herbirini daha önceki yazılarımızda anlatmıştık. Şayet kullanımı bilmiyorsanız önceki yazılarımızdan faydalanabilirsiniz.

Son olarak jQuery’den yararlanarak Css ile gizlediğimiz alt menülerin görünümünün slayt şeklinde olmasını sağladık. Css3 ve Xhtml ile kolayca menümüzü oluşturduk ve görünümünü düzenledik. Menünün padding ve margin değerlerinin orantılı kullanımına dikkat ettik.

(İndireceğiniz örnek dosyada style.css ve index.html kodları içerisinde yazmış olduğum kodlarla ilgili birtakım açıklamalar yazdım. Bunları okumanız menünün nasıl yapıldığını anlamanız adına yararlı olacaktır. Bu menüyü, Firefox, Chrome ve Safari tarayıcılarda sorunsuz olarak görüntüleyebilirsiniz. Atladığım veya unuttuğum bir nokta varsa şimdiden özür dilerim)

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

Menümüzün yapısal tasarımını hazırlarken Html’de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Makalemizin başında Ul ve Li etiketlerinden faydalanacağımızı söylemiştik. Menü yapımızda göreceğiniz üzere ul ve li etiketlerinin sıralı başlangıç ve kapanışı ile menümüzü kod olarak inşa ediyoruz. Şimdi aşağıya menümüzün Xhtml kodlarını yazalım.

<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Bölümler</a></li>
<li><a href="#">Makaleler</a></li>
<li><a href="#">Dosyalar</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

Yukarıdaki kodlarda gördüğünüz üzere bir Ul etiketi başlattık ve daha sonra gelen Li etiketleriyle menümüzün asıl görünecek bağlantılarını li içinde a etiketiyle tanımladık. Tabi menümüzün ana zeminini oluşturan menu isimli div yapısını da en başta tanımladık ki menümüzün sınırları belli olsun. Yapı bakımından karmaşık birşey yok sanırım.

Şimdi menümüzde yazmış olduğumuz Html etiketlerini stil dosyamızda tanımlayalım. Burada ayrıca bir parantez açmak istiyorum. Şayet bir tasarım yaparken Xhtml/Css kodlama yapmam gerekirse (ki bu en basit menüden en karmaşık Xhtml/Css sayfaya kadar ne olursa olsun) öncelikle Xhtml kodlarını yazmayı tercih ediyorum. Sizlere de bu tarz makalelerde verdiğim örneklerde göreceğiniz gibi her zaman ilk sırayı Xhtml kodları alır. Tabi önce Css kodları yazılıp bu kodlar üzerine Xhtml kodları da yazılabilir. Ancak ben yıllardır böyle bir kodlama yöntemini kendime daha yakın görüyorum. Çünkü Xhtml ile sınırlarını belirlediğim bir yapıda Css ile düzenleme yapmam daha kolay oluyor.

Lafı fazla uzatmadan Xhtml kodunda yazmış olduğumuz tüm etiketlerin sırasıyla stillerini yazalım.

#menu {margin:0;padding:0;background:#333 url(menu_back.gif);height:40px}
#menu ul {margin:0; padding:0;}
#menu li {display:inline;margin:0;padding:0;list-style-type:none;line-height:40px;}
#menu li a {color:#fff;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}
#menu li a:hover {color:#759C0A;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}

Css kodlarında gördüğünüz üzere öncelikle menü isimli div etiketimizi tanımlıyoruz. Burada menümüzün arkaplanının menu_back.gif olmasını istedik ve yüksekliğini ayarladık.

Daha sonra menu isimli div’in içinde açılacak olan ul etiketinin değerlerini belirliyoruz. Ul etiketinin margin ve padding değerlerini 0 yaptık. Sonrasında ise menu div içinde çağrılan li etiketini düzenliyoruz. Burada dikkat edeceğimiz husus görünümün yani display parametresinin inline olması. Inline değerini kullanıyoruz ki menümüzün ögeleri birbirini izlesin. Şayet bu parametreyi block olarak alırsak menü birimlerimiz birbirinin altına kayacaktır. Sonrasında line-height değerini 40px olarak ayarlıyoruz. Bunu yapmamızın nedeni menu isimli div’e arkaplan olarak atadığımız menu_back.gif isimli resmin 40px yüksekliğe sahip olması. Böylelikle menü birimlerimiz arkaplan üzerinde ortalanmış bir şekilde görünecek.

İşin belkide en öldürücü kısmı tabi ki menümüzün bağlantıları. Xhtml kodlarında gördüğünüz gibi menu li a ile menü birimlerini tanımladık. Bu etikete atayacağımız değerler menümüzün görünümünü büyük oranda şekillendirecek. Tabi sonrasında a etikenin a:hover özelliğinden yararlanarak menümüze fare ile geldiğimizde nasıl bir görünüm alacağını da belirliyoruz.

Bu aşamadan sonra menümüz büyük oranda şekillendi. Ancak makalemizin başında söylediğimiz gibi menümüzü küçük ikonlarla destekleyeceğiz demiştik. Peki bu ikonları yapıları belli olan bir Css dosyasında nasıl tanımlayacağız? Zira menümüz bu haliyle yeni bir Css koduna ihtiyaç duyuyor.

Aslında olay çok basit. Sadece kullanmış olduğumuz menu li a etiketine yeni Css sınıfları ekleyeceğiz. Hatta bu sınıfları öyle inşa edeceğiz ki li class=”sinifismi” değeri vererek her şekillendirdiğimiz li a etiketinin görünmesini sağlayacağız. Şimdi dilerseniz sadece gerekli bu alanı yazalım.

#menu li.anasayfa a {background:url(anasayfa.gif) no-repeat;color:#fff;padding:0px 10px 0px 20px;text-decoration:none;font:1.1em arial, verdana, helvetica, sans-serif;}

Yukarıda yazan koda baktığınızda menu li a etiketine .anasayfa isimli bir Css sınıfı dahil ettik. Normal kodlarımızdan farklı olarak bir arkaplan resmi atadık. Bu arkaplan resmi bizim küçük ikonumuz tabi ki. Başka hiçbir değerle oynamadık. Bu şekilde kodumuzu yazdıktan sonra Xhtml kodu üzerinde Anasayfa bağlantısının li etiketine şunu ekliyoruz.

<li class="anasayfa">

Böylelikle Css olarak tanımladığımız sınıfı Xhtml koduyla çağırmış olduk. Atamadan sonra menümüzün anasayfa yazan bölümü değişmiş olmalı.

Oluşturduğumuz menüye ait örnek sayfada yazılmış olan tüm sınıfları görebilirsiniz. Ayrıca menümüzün son halini de bulabilirsiniz. Makalemizin sonuna indirme adreslerini yazacağım. Siz bu menüyü ikonları değiştirerek, arkaplanları, hover renklerini değiştirerek dilediğiniz gibi şekillendirebilirsiniz. Menü tasarım mantığını kavramanız açısından kodları incelemenizi tavsiye ediyorum. Son olarak makalemizde kullandığımız küçük ikonlarımızın kaynağını FamFamFam sitesinde bulabilirsiniz.

Umarım sizler için faydalı olmuştur… (Yakın bir zamana kadar sitemizde yazmış olduğumuz bu teknik anlatımlı makaleleri t’infection.com Atölye bölümünde toplayacağım, o yüzden şimdilik örneklerin yeri site üzerinde biraz karışık. İlerleyen günlerde yeni bir alan açıp düzenlemesini yapacağım.)

Menü Örneği | Menüyü İndir (7kb)

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.