Forum
Aktif konular
Üyeler
Kurallar
Arama
Jquery Tab Menü Örnek 2 Jquery Tab Menü Örnek 2
-
Sitelerinizde etkileşimi kolaylaştırmak için jQuery ile yatay tab menü örneğinin ikinci örneği
Sitil betiklerimiz
*{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;outline:none;} body{font-family:'Arial', Helvetica, sans-serif;font-size:12px;color:#444;background-color:#f3f3f3;} .ortalayici{width:600px;margin:100px auto 0px auto;min-height:1px;padding:5px;} .cb{clear:both;} h1{font-size:30px;line-height:36px;margin-bottom:10px;text-align:center;} .stab-yatay{position:relative;margin-bottom:10px;margin-top:40px;} .stab-yatay .stab-baslik{list-style-type:none;position:absolute;top:-30px;} .stab-yatay .stab-baslik > li{float:left;height:30px;margin-left:4px;background:#D3D2D0;color:#fff;padding:0px 20px;line-height:30px;font-size:18px;border-radius:6px 6px 0px 0px;cursor:pointer;} .stab-yatay .stab-baslik > li:first-child{margin-left:20px;} .stab-yatay .stab-baslik > li.aktif{background:#BA0C27;} .stab-yatay .stab-icerik{list-style-type:none;background:#fff;border:1px solid #D2D2D2;} .stab-yatay .stab-icerik > li{padding:20px;display:none;line-height:20px;} .stab-yatay .stab-icerik > li:first-child{display:block;} .stab-yatay .stab-icerik > li h5{font-size:18px;} .stab-yatay .stab-icerik > li a{color:#E01D26 !important;text-decoration:none;} .stab-yatay .stab-icerik > li a:hover{text-decoration:underline;} .stab-yatay .stab-icerik > li .yazi{margin-bottom:15px;} .stab-yatay .stab-icerik > li .yazi .tarih{margin-right:20px;} .ontedi{color:#55270D;text-decoration:none;float:right;margin-top:6px;}jQuery Betiğimiz
jQuery(document).ready(function () { jQuery(".stab-yatay .stab-baslik li:first").addClass("aktif"); jQuery(".stab-yatay .stab-baslik li").live("click", function () { var intIndeks = jQuery(this).index(); jQuery(this).parent().children("li").removeClass("aktif"); jQuery(this).addClass("aktif"); jQuery(this).parent().parent().parent().find(".stab-yatay .stab-icerik li").css({ "display": "none" }); jQuery(this).parent().parent().parent().find(".stab-yatay .stab-icerik li:eq(" + intIndeks + ")").css({ "display": "block" }); }); });Html Betiğimiz
<div class="ortalayici"> <h1>jQuery Tab Menü Örnek 2</h1> <div class="stab-yatay"> <ul class="stab-baslik"> <li>Haberler</li> <li>Bizden</li> </ul> <div class="cb"></div> <ul class="stab-icerik"> <li> <div class="yazi"> <h5>CES 2014 Tüketici Elektronik Fuarı</h5> <p>Tüketici elektroniği sektörü için yılın en büyük olayı kuşkusuz Las Vegas’ta her yıl Ocak ayının başında düzenlenen, sektörde kısaca CES olarak bilinen Consumer Electronic Show. Fuar bu yıl 7-10 Ocak tarihlerinde yapılıyor.</p> <span class="tarih">11 Mart 2014 Salı</span><a href="">daha...</a> </div> </li> <li> <div class="yazi"> <h5>Yeni Şubemiz Açıldı</h5> <p>Ankara Beysukent'te yeni şubemizi açtık.</p> <span class="tarih">18.03.2014 12:52:19</span><a href="">daha...</a> </div> <div class="yazi"> <h5>Facebook sayfamız yayında!</h5> <p>Ürün görsellerimizin bulunduğu facebook sayfamız yayında</p> <span class="tarih">11.03.2014 10:31:53</span><a href="">daha...</a> </div> </li> </ul> </div> <a class="ontedi" href="http://www.ontedi.com">www.ontedi.com</a> <div class="cb"></div> </div>Çalışmamızın gösterimi
Güle güle kullanının
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Toplam Hit: 851 Toplam Mesaj: 1
Cevapla