Bu uygulamamızda Css3, Xhtml ve jQuery ile ikon destekli dikey (vertical) tab menü (veya tab navigasyon da diyebiliriz) uygulaması yapacağız. Tab menümüzü oluşturduğumuz aşamaları da makalemiz sonunda sizlerle konuşacağız. Dilerseniz hemen kodlarımızı yazmaya başlayalım.

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

<div id="menualani">
<div class="ikonalani">

<a href="#" class="ikon1 aktifikon">ikon 1</a>
<a href="#" class="ikon2">ikon 2</a>
<a href="#" class="ikon3">ikon 3</a>

</div>

<div class="icerikalani">
<div class="icerik1 goster"><h2>KATEGORİLER</h2>
<ul>
<li><a href="#">XHTML / CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">DREAMWEAVER</a></li>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">PHP / MYSQL</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">KISA KISA</a></li>
<li><a href="#">GENEL KONULAR</a></li>
</ul>

</div>
<div class="icerik2">
<h2>HAKKIMIZDA</h2>
<p>Sitemiz hakkında verebileceğimiz kısa bir tanıtım cümlesi ve girişi bu alana yazabiliriz. Bu alandaki yazıyı içerik2 isimli div sınıfı içine yazıyorum. </p>

<p><a href="#">Hakkımızda</a> <a href="#">RSS Takip</a></p>

</div>
<div class="icerik3">
<h2>BİZİ TAKİP EDİN!</h2>
<p>Aşağıdaki bağlantılardan yararlanarak bizi farklı sosyal medya sitelerinde takip edebilirsiniz. </p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Friendfeed</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

</div>
</div>

Şimdi Xhtml kodlarımızın görünümünü düzenleyecek olan Css kodlarımızı yazalım.

#menualani {width:300px;display:block;float:left}

/* Menümüzün ikon alanını aşağıda tanımalamaya başlıyoruz. Sonrasında her bir menü ikonumuzu tanımlayacağız. */
.ikonalani {width:42px;display:block;float:left;position:relative;z-index:999;}

/* ikon1, ikon2 ve ikon3 için ortak stil tanımlaması yapıyoruz. Özelleştirmeleri aşağıdaki kodlarda işleyeceğiz */
/* text-indent:-9999px değeri ile ikonlarımızdaki metin bağlantıları ortadan kaldırıyoruz */

a.ikon1, a.ikon2, a.ikon3 {
text-decoration:none;
display:block;
outline:none;
text-indent:-9999px;
width:40px;
height:40px;
}

/* Şimdi ikonlarımız için özel olarak arkaplan resmi tanımlıyoruz. */

a.ikon1 {
background:#fff url(resim1.png) no-repeat center center;
margin-top:10px;
}

a.ikon2 {
background:#fff url(resim2.png) no-repeat center center;
}

a.ikon3 {
background:#fff url(resim3.png) no-repeat center center;
}

/* Menümüzde aktif olarak görünecek olan ikonu .aktifikon sınıfı içinde tanımlıyoruz. Parametrelere dikkat! */

a.aktifikon {

background-color:#ddd;
width:40px;
height:40px;
border-top:2px solid #bbb;
border-left:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:2px solid #ddd;
display:block;
-moz-border-radius:6px 0px 0px 6px; /* Firefox için köşe yuvarlatalım */
-webkit-border-radius:6px 0px 0px 6px; /* Google Chrome ve Safari için köşe yuvarlatalım */
border-radius: 6px 0px 0px 6px; /* Opera için köşe yuvarlatalım */
}

/* BU ALANDAN SONRA İÇERİK ALANIMIZI TANIMLAMAYA BAŞLAYACAĞIZ... */

/* İçerikalaninin z-index'ini ikon alanından daha düşük bir sayıyla tanımlayarak daha altta kalmasını sağlıyoruz... */
/* z:index:1 */

.icerikalani {width:250px;background:#f5f5f5;float:left;position:relative;z-index:1;display:block}

/* Dikkat! Tüm içerik isimli alanları display:none ile gizliyoruz */
.icerik1, .icerik2, .icerik3 {display:none}

.icerik1, .icerik2, .icerik3 {
background:#ddd;
color:#fff;
height:300px;
top:48px;
border:2px solid #bbb;
margin-left:0px;

/* Bu kez her bir içerik alanımız için köşe yuvarlatıyoruz. Tabiki farklı tarayıcılar için farklı kodlarla :( */
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px;
}

/* Daha önce gizlediğimiz tüm icerik alanlarına bu sınıf eklenerek görünür hale gelecek. */
/* display:block bu gösterim için yeterli */
.goster {display:block;}

/* Bu alandan sonraki kodlar icerik isimli sınıfı güzel bir görünüme kavuşturmak için oluşturduğum css kodları */
/* Genel olarak başlık, sırasız liste [menümüz], paragraf ve bağlantı etiketlerini .icerikalani sınıfı içinde tanımladım */

.icerikalani h2 {font:bold 16px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#333;text-shadow:0px 1px 2px #fff}
.icerikalani ul {list-style:none;margin:0;padding:0px 10px 0px 10px;}
.icerikalani li {padding:0;margin:0}
.icerikalani ul li a {text-decoration:none;color:#333;background:#ddd;font:12px arial, verdana, sans-serif;border-top:1px solid #eee;border-bottom:1px solid #ccc;padding:6px;margin:0;display:block}
.icerikalani ul li a:hover {text-decoration:none;color:#fff;background:#333;font:12px arial, verdana, sans-serif;border-top:1px solid #ccc;border-bottom:1px solid #aaa;padding:6px;margin:0;display:block;text-shadow:0px 1px 2px #fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius: 4px;
}
.icerikalani p {font:13px/24px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#666;}
.icerikalani p a {padding:4px;background:#2e83ff;color:#fff;text-decoration:none}
.icerikalani p a:hover {padding:4px;background:#666;color:#fff;text-decoration:none}

Menümüzün fare ile tıklanışında yapacağı değişiklikleri jQuery yardımı ile tanımlayalım.

<script>
$(document).ready(function() {

	$("a.ikon1").click(function() { // ikon1'e tıklandığında neler olacak?

		$(".icerik1").addClass("goster");
		$(".icerik2, .icerik3").removeClass("goster");

		$("a.ikon1").addClass("aktifikon");
		$("a.ikon2, a.ikon3").removeClass("aktifikon");

        return false;

		});

	$("a.ikon2").click(function() { // ikon2'ye tıklandığında neler olacak?

		$(".icerik2").addClass("goster");
		$(".icerik1, .icerik3").removeClass("goster");

		$("a.ikon2").addClass("aktifikon");
		$("a.ikon3, a.ikon1").removeClass("aktifikon");

		return false;

		});

	$("a.ikon3").click(function() { // ikon3'e tıklandığında neler olacak?

		$(".icerik3").addClass("goster");
		$(".icerik1, .icerik2").removeClass("goster");

		$("a.ikon3").addClass("aktifikon");
		$("a.ikon2, a.ikon1").removeClass("aktifikon");

        return false;

		});

	});
</script>

Uygulamamızın Detayları
Bu kadar kod yazdıktan ve uygulamayı oluşturduktan sonra ne yaptığımız anlatmamak olmaz değil mi :)

Öncelikle bu uygulamanın ne gibi bir zemin üzerine kurulduğunu anlatalım. Xhtml kodlarında dikkat ettiğiniz gibi iki tane ana sınıf bulunmakta. Bunlardan birisi sadece ikonlarımızın yer aldığı “ikonalanı” ve diğeri ise içeriğimizi yerleştirdiğimiz “icerikalanı” isimli sınıflar.

İkonalanı isimli sınıfımızda belli bir genişlik içinde ikonlarımızın alt alta yer almasını istedik. Ayrıca bu alanda yer alan her bir ikonumuza ikon1, ikon2 ve ikon3 diye ayrı ayrı sınıflar oluşturduk. Kodları optimum düzeyde kısaltma adına ikonların görünümündeki ortak özellikleri tek bir Css kodunda topladık. Css kodlarında yazmış olduğum açıklamalara ve kodlara dikkat ederseniz bunu görebilirsiniz.

Bu noktada önemli olan şu ki; hangi ikona tıklanırsa tıklansın o ikon jQuery yardımı ile “aktifikon” isimli Css sınıfını kazanmakta. Aktifikon isimli Css sınıfını içerikalanı isimli sınıfımıza göre görünüm olarak düzenleyip menü de bir bütünlük olmasını sağladık. Yine kodlar üzerinde bunu görebilirsiniz.

Bu aşamadan sonra içeriğimizin görüneceği ana alan olan “içerikalanını” tanımlaya geldi. Yine içerik alanı da belli bir genişlik içerisinde girmiş olduğumuz içerikleri gösteren alan olarak görevini yapacak. Dikkat çektiğimiz nokta şu; nasıl ki ikonalanında her bir ikon için ikon1, ikon2 ve ikon3 diye sınıflar oluşturduysak aynısını içerik alanı içerisinde de yapıyoruz.

Burada oluşturduğumuz icerik1, icerik2 ve icerik3 isimli div sınıfları fare ile hangi ikon sırasına tıklanırsa aynı ikon sırasıyla görünecek. Oldukça basit değil mi.

Yazdıklarımızı toparlayacak olursak iki ana sınıf içinde sıralı şekilde ikon1-icerik1, ikon2-icerik2 ve ikon3-icerik3 alanlarını tanımladık. Bu alanların görünümlerini Css’de uygun parametre ve değerler ile zenginleştirdik. Şimdi iş her bir ikona tıklayışta içeriğimizin nasıl değiştiğini anlatmaya geldi.

jQuery Aşamasında Ne Yaptık?
Uygulamamızın en kolay ve belki de en can alıcı noktası da burası. Yazmış olduğumuz jQuery kodlarını incelerseniz sonuca nasıl gittiğimizi anlayabilirsiniz.

İlk ikon sıramızda ne gibi bir işlem yaptığımızı anlatalım. İkon1 isimli ikonumuza tıklandığında gerçekleşecek olan olayları sırayla tanımladık. İkon1′e tıklandığında jQuery’nin addClass ve removeClass fonksiyonlarından yararlanarak diğer alanlarımızın Css sınıfı almasını ve/veya bunu kaldırmasını sağladık. Adından da anlaşılacağı gibi addClass bir ögeye sınıf eklemeye, removeClass ise tam tersi sınıf kaldırmaya yarıyor.

Şöyle ki; İkon2′ye tıklandığında önceden görünür halde olan icerik1 ve ikon1 isimli sınıflarımız yaptığımız tanımlamaya göre “goster” ve “aktifikon” isimli Css sınıfını kaybettiler. Bununla birlikte hem ikon2 hem de icerik2 isimli alanlarımız goster ve aktifikon sınıfını kazandılar. Mantığı gayet basit olan bu yöntemi her 3 durum için de uyguladık. Uzun lafın kısası 1 görünürken 2 ve 3 gizlensin ve sınıf kaybetsin, 2 görünürken 1 ve 3 gizlensin ve sınıf kaybetsin :)

(Aslına bakarsanız bu tarz bir olay gelişimi için farklı yöntemler kullanılabilir. Fakat ben jQuery’nin az kod çok iş mantığına bağlı kalarak kodları elimden geldiğince kısa tuttum)

Tarayıcı Uyumu
Yine geldik o malum şarkıya :) Uygulamamız Firefox, Google Chrome, Safari ve Opera ile sorunsuz çalışacaktır. IE türevleri içinse durum biraz farklı. IE üzerinde sadece yuvarlak köşeler görünmeyecek ama uygulama sorunsuz çalışacaktır. IE üzerinde köşeleri yuvarlatmak için farklı yöntemler mevcut ancak ben örneğimiz üzerinde böyle bir ekleme yapmadım. Dilerseniz kaynak kodlarda değişiklik yaparak IE için farklı görünümler ortaya çıkarabilirsiniz.

Son Olarak…
Uygulama üzerinde veya kod aşamasında atladığım, eksik bulduğunuz noktalar olursa lütfen yorumlarınızla beni bilgilendirin. Umarım sizler için faydalı bir anlatım ve doküman olmuştur. Bir başka makalemizde görüşmek üzere.

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