MENU

jQuery Tab Menü Eklentisi ve Kullanımı

Anasayfa » jQuery » jQuery Tab Menü Eklentisi ve Kullanımı
jQuery Tab Menü Eklentisi ve Kullanımı

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

http://2.bp.blogspot.com/-2CKGLF4STCk/UexAo-Hr-OI/AAAAAAAASHI/vi9LqEPt16Q/s1600/Tabulous.jpg

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

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.