jQuery ve CSS İle Yapılan Kullanışlı Tab Menü Örneği

jQuery ve CSS İle Yapılan Kullanışlı Tab Menü Örneği

Cagukan.com adresi için bir tab örneği hazırladım. Bu tab menü jQuery ve css yardımıyla hazırlamıştır.

* Tab menü id mantığıyla hazırlanmıştır, aşağıda yapımını kısaca anlatacağım ancak hazırladığım içeriği altta direk download linki olarak veriyorum uğraşmadan benim yaptığım menü’yü indirebilirsiniz.

+ Başlangıç

  1. İlk olarak jquery.com/download adresine gidip jQuery kütüphanesini indiriyoruz.
  2. Daha sonra tab.js adlı bir dosya oluşturuyoruz buraya tab öğreğinde kullanacağım jquery kodlarımızı ekleyeceğiz.

+ JS, CSS Dosyalarını Çağırma

  1. Çalışmanızın <head> tagları arasına aşağıdaki kodları yazarak javascript dosyasını ve css dosyalarını çağırıyoruz.

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tab.js"></script>

+ Tab Örneğimizin HTML Yapısını Oluşturma

	<div id="tab-menu"> // Tab Örneğimizin Divini açıyoruz
		<div class="tab-menu">
			<a href="#">1. tab</a>
			<a href="#">2. tab</a>
			<a href="#">3. tab</a>
		</div> // Div'i kapatıyoruz.
		<div class="tabmenuContent">İçerik 1</div> // Tab içeriğimiz
		<div class="tabmenuContent">İçerik 2</div>
		<div class="tabmenuContent">İçerik 3</div>
	</div>

+ jQuery yazalım

$(function(){

	var tab = $('.tab-menu a'),
		content = $('.tabmenuContent');

	// ilk tab'a aktif sınıfını ata
	tab.filter(':first').addClass('aktif');

	// ilk içerik hariç diğerlerini gizle
	content.filter(':not(:first)').hide();

	// taba tıklandığında!
	tab.click(function(){
		var indis = $(this).index();
		tab.removeClass('aktif').eq(indis).addClass('aktif');
		content.hide().eq(indis).fadeIn(500);
		return false;
	});

});

+ CSS’lerimizi Yazalım

/* Tab Menü */
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
text-decoration: none;
font-family: Arial
}
#tab-menu {
padding: 15px;
width: 600px
}
.tab-menu {
margin-bottom: 5px
}
.tab-menu a {
background: none repeat scroll 0% 0% #134bcc;
border-bottom: 5px solid #fdcc76;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 14px;
padding: 10px 20px;
display: inline-block;
}
.tab-menu a.aktif {
background: none repeat scroll 0% 0% rgb(9, 60, 177);
color: rgb(255, 255, 255);
border-bottom: 5px solid #fbaf29;
}
.tabmenuContent {
background: #fff;
padding: 10px;
border: 1px solid #ececec;
}

Aramalar:

  • html ile master tab yapımı
  • css tab menü
  • css ve jquery açılır menü örnekleri
  • jquery tab menü
  • sekmeli açılır menü örnekleri
mature porno
porno hikayeleri
Etiketler:, ,
YAPILAN YORUMLAR
  • Ahmet diyor ki:

    En son 3.tabı seçiyorum sayfayı f5lediğim zaman
    default ayar 1.tab seçili oluyor
    kaldığı yerden devam etmesi için ne yapmam gerekli

    2.tabda f5lediğim taktirde 2.tabı bana göstermeli…

  • Batuhan diyor ki:

    Teşekkür ediyorum admin,

  • ibrahim diyor ki:

    ben ilk açılışta ilk tabın seçili olmasını istemiyorum duruma göre kendim belirlemek istiyorum bunu nasıl yapabilirim

  • Ramiz TAYFUR diyor ki:

    Bu mevcutta indirdiğimiz dosyayı herhangi bir sayfa içerisine gömmek istesek nasıl bir yol izlememiz gerekiyor? Yani bi e-ticaret sitesinin sayfasına bu tab menüyü gömmek istiyorum. Bu işlemi nasıl yapıcam. Bu vermiş olduğunuz haliyle eklemeye çalıştığımda sayfa yapısı bozuluyor.

  • mehmet diyor ki:

    tab2 yada tab3 te herhangibir element PostBack yatığı zaman aktif olan tab1’e dönüyor. kaldığım yerden devam etmek için ne yapmalıyım mesela tab2 de isem tab2 de tab3 ise tab3 te

  • BİR YORUM YAPIN

  • Aramalar:

    • html ile master tab yapımı
    • css tab menü
    • css ve jquery açılır menü örnekleri
    • jquery tab menü
    • sekmeli açılır menü örnekleri