Merhabalar. Beğendiğim bir jQuery tab menüyü sizlerle paylaşıyorum.

Tasarımcılar için kesinlikle öneriyorum yeni yaptığınız web sitelerinde böyle güzel tab menüler kullanırsanız web siteleri daha şık olacaktır. 🙂

tabulous.js

Demo / Download

Kurulumu ise alttaki gibi;

HTML head tagları arasına alttaki gibi ekliyoruz. Yanlız burada bilmeniz gereken bu eklenti 1.7.2 sürümünde denenmiş ve çalışıyor siz hangi sürümde deneyeceksiniz bilmiyorum çakışma ihtimali olabilir. Birde sizin kullandığınız bir sürüm var ise alttaki jquery.min.js’yi kaldırın.

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

Daha sonra jQuery tab menümüzü oluşturacağız. HTML’i artık tab nerede olacaksa oraya ekliyorsunuz.

<div id="tabs">
		<ul>
			<li><a href="#tabs-1" title="">Tab 1</a></li>
			<li><a href="#tabs-2" title="">Tab 2</a></li>
			<li><a href="#tabs-3" title="">Tab 3</a></li>
		</ul>

		<div id="tabs_container">

			<div id="tabs-1">
				<!--tab content-->
			</div>

			<div id="tabs-2">
				   <!--tab content-->

			</div>

			<div id="tabs-3">
				    <!--tab content-->
			</div>

		</div><!--End tabs container-->

</div><!--rooteto tab bitti-->

jQuery Fonskyionumuzu alttaki kod ile çalıştırıyoruz ve tab’ımız bundan sonra aktif hale geliyor.

$(document).ready(function ($) {

    $('#tabs').tabulous({);

});

jQuery tab menüler çok gördüm ancak en güzeli bu adamınki diyebilirim. Adamın sitesi 🙂 : tabulous.js