Merhabalar. Bu gönderimizde sizlere t-infection.com sidebar üzerinde kullanmış olduÄŸumuz Easy Tabs menüyü ve kullanımını anlatacağız. Ä°letiÅŸim formu yoluyla bize ulaÅŸan OÄŸuz’a selamlar :)

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.

Rastgele Yazılar