CSS artık derya deniz oldu. Herşey olmasa da birçok şeyin yapılması şekillendirilmesi CSS 3 ile birlikte ortaya çıktı. Bunlar bir yana dururken CSS ile yapılan çok güzel menülerde gözümüzü doldurmayı başardı. Bu tür menülerden bir tanesi de açıklamalı olanlarıdır. Açıklamalı menü dediğim şey özellikle navigasyon menülerde karşımıza çıkıyor. Büyük puntolarla yazılmış link (örneğin anasayfa) hemen linkin altında da küçük puntolarla yazılmış açıklaması (örneğin blog) bulunuyor. Bu tür menüleri CSS ile yapmak mümkün.

Anlatmaya geçmeden önce açıklamalı menümüzün yapılmış halini şöyle bir görelim:

Önce CSS düzenleyici programımızda menümüzü şekillendirelim. Class seçici yerine id seçici kullanacağız. Bunun için ilk adım olarak ul olarak kullanacağımız nav’ı biçimlendireceğiz.

#nav{
	list-style-type:none;
	background:#000;
	margin:0;
	padding:0;
	border-bottom:3px solid #999; }

İlk satırdaki biçimlendirme ile listede herhangi bir işaret kullanmadık daha sonrasında da arkaplanı renklendirdik. Margin ve padding değerlerini de bazı tarayıcıların otomatik değer atamasından dolayı sıfırladık. Son olarak işin biraz artistliğine kaçıp listemizin dip kısmına 3 pixel kalınlıkta düz bir çizgi atadık.

Şimdi de li etiketini biçimlendireceğiz. Aşağıdaki kodu takip edelim

#nav li{
	float:left;
	margin-left:5px;}

Normalde listelerin yatay olması için display:inline özelliğini kullanırdık. Fakat burada inline kullandığımız zaman menü yatay değil dikey oluşuyor. Çünkü span etiketi biraz işi bozuyor. Bunun için float uyguladık. Margin değeri de butonlar arası boşluğu ifade ediyor ki istediğimiz değeri atayabiliriz. Şimdi de li etiketinin link durumuna şekil vereceğiz.

#nav li a{
	text-decoration:none;
	color:#FFF;
	font-size:24px;
	font-family:Verdana, Geneva, sans-serif;
	border-left:2px dashed #FFF;}
 
#nav li a:hover{
	color:#F00;
	border-color:#F00}

Beyaz renkli linklerimize kenar çerçeve atadık ve üzerine gelince kırmızıya dönecek.

Şimdi de açıklama için span ayarlaması yapacağız.

.bilgi{
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FF0;
	display:block;
	padding-left:5px;}

Sarı renkte ve 12 pixel büyüklükte olacak açıklama yazılarımız. Padding değeri üst link ile aynı hizada olmasını sağladı. Ayrıca display:block kullanma nedenimiz de span’ın yeni satırdan başlamasını sağlamak.

Şimdi bu yazdıklarımızı html sayfamızda bir deneyelim.

<ul id="nav">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Kaydettiğimiz zaman arkaplanın siyah olmadığını daha doğrusu arkağlanın görünmediğini fark edebiliriz. Yani bu haliyle bozuk bir görüntü meydana geliyor. Bunun sebebi de float kullandıktan sonra ul’nin kapsama sorununa maruz kalması oldu. Bunun için clear kullanmamız gerekiyor.

Ancak bildiğimiz clear yönteminden farklı olarak after özelliğini kullanacağız. Üstelik bunu ul etiketine uygulayacağız. Önce aşağıdaki kodları css dosyamıza ilave edelim.

.duzelt:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
* html .duzelt { height: 1px; } /* IE6 */
*:first-child+html .duzelt { min-height: 0; } /* IE7 */

Şimdi de html begemiz içerisindeki ul etiketine class uygulayacağız.

<ul id="nav" class="duzelt">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Gördüğümüz gibi artık düzgün bir şekilde çalışıyor menümüz. Açık söylemeliyim ki bu menünün yapımını ben de çok merek ediyordum ve dünden bu yana makaleyi yazmaya karar verdikten sonra araştırdım. Sevgili Fatih Hayrioğlu’na ve Bilal Çınarlı’ya da katkılarından dolayı teşekkür ederim.

Menü önizleme için buraya kaynak kodları indirmek için de buradan buyrun.