ankara escort
escort istanbul - istanbul escort

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.

[php]

<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>

[/php]

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

[html]
<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>
[/html]

+ jQuery yazalım

[js]
$(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;
});

});
[/js]

+ CSS’lerimizi Yazalım

[css]
/* 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;
}
[/css]

Etiketler:, ,
YAPILAN YORUMLAR
  • Ahmet dedi 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 dedi ki:

    Teşekkür ediyorum admin,

  • ibrahim dedi 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 dedi 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 dedi 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

  • ankara escort bayan adana escort bayan | eskişehir escort bayan | antalya escort bayan | mersin escort bayan | mersin bayan escort ankara bayan escort | eskişehir bayan escort | adana bayan escort
    kacak iddaa kacak bahis siteleri bahis siteleri canli bahis siteleri