Efendim, sitemizde kullanmış olduğumuz tabmenü Koller Jürgen‘in geliştirmiş olduğu EasyTabs‘ın 1.2 sürümüdür. Bu menü kullanımının kolay oluşu, onmouseover özelliği sayesinde tab’lar arası kolay geçiş sayesinde tercihim oldu. Ayrıca biraz Css bilginiz varsa menünün birçok alanına müdahale edebiliyorsunuz. Tüm bunlarla birlikte menünün “Autochange” özelliği ile tablar kendi arasında otomatik olarak sırayla açılabiliyor. (dilerseniz bu özelliği kaldırabiliyorsunuz)

Şimdi gelgelelim menümüzü indirip kullanmaya. Öncelikle Kollermedia.at sitesinden menümüzü indiriyoruz. İndirmiş olduğumuz paketi klasör olarak dışarıya çıkarıyoruz. Sonrasında yapmamız gereken adımlar şunlar;

Sitemizin HEAD bölümüne menünün kullandığı easytabs.js dosyasının kodunu giriyoruz.

<script type="text/javascript" language="javascript" src="easytabs.js"></script>

Bu aşamadan sonra ise menümüzün görünmesini istediğimiz yere menünün ana kodlarını koymanın vakti geldi. Sitemizde BODY bölümü içerisine şu kodları yerleştiriyoruz.

<!--Start of the Tabmenu1 -->
<div class="menu">
<ul><li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">TAB 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">TAB 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">TAB 3</a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;"  title="" id="tablink4">TAB 4</a>
</li>
</ul>
</div>
<!--End of the Tabmenu1 -->

<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->

Kodlarda görebileceğiniz gibi menünün kodları çok kolay ve düzenlemesi de gayet basit. Kodların içindeki yorum alanlarını bilerek kaldırmadım çünkü bunlar bizlere oldukça faydalı ipuçları veriyor. Tabcontent 1 alanı bizim TAB 1 bölümümüzün içeriği oluyor. Buraya koyacağınız tüm bileşenler Tab 1 içerisinde görünecek. Doğal olarak tablar içini sırasıyla istediğiniz içerikle doldurabilirsiniz. Xhtml ve Css kullanımı da size kalmış bir olay.

Menü konusunda biraz Css bilginiz varsa iyi bir düzenleme yapabileceğinizi söylemiştim. Ben menünün orjinaline sadık kaldım sadece menünün aktif olan tab’ında (yani fare ile üzerine gelinen tab’da) bir arkaplan resmi ekledim ve menümü böyle kullanıma açtım. Görünüm açısından orjinalinden biraz daha iyi oldu. Siz de menünün kendi içinde gelen Css dosyasında dilediğiniz değişimi yapabilirsiniz.

Menünün orjinal kodları içinde Autochange özelliği aktif olarak geliyor. Şayet bunu iptal etmek isterseniz easytabs.js dosyasını bir metin editörü ile açın. Dosyada var autochangemenu = 1; satırını bulun ve 1 değerini 0 yapın sonra kaydedin. Böylelikle menünün tabları otomatik olarak değişmeyecektir.

WORDPRESS SİTEMİZDE BU MENÜYÜ NASIL KULLANACAĞIZ?
Şayet benim gibi bir Wordpress tabanlı site üzerinde bu menüyü kullanmak isterseniz yapacağınız işlemler hemen hemen aynı. Sadece Head bölümüne eklenmesi gereken kodu temanızın header.php dosyasına ekleyin. Ekleme sırasında .js dosyası ile kullanmış olduğunuz yolun aynı olmasına dikkat edin.

Son olarak menünüzü nerede göstermek istiyorsanız (bizim sitemizde sidebar.php içinde görünmektedir) o alana Body içinde koyulacak kodları ekleyin. Genellikle bu tarz menüler Sidebar alanında olur ve kullanımı da oldukça kolay olduğu için bu alanlarda tercih edilir.

Umarım sizler için faydalı olmuştur. Bir başka gönderide görüşmek dileğiyle.