Uzun bir aradan sonra yeniden merhabalar. Bu makalemizde Css ve Xhtml ile klasik bir yatay açılır menü yapacak daha sonra bu menümüzü jQuery ile biraz dinamik hale getireceğiz.

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)

Rastgele Yazılar