Konu: Tab menü ekleme  (Okunma sayısı 2244 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

03 Mayıs 2014, 19:51
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

(Üzgünüm. Galeriyi görme yetkiniz yok)
Demo: SMF Destek - Mod, Tema, Eklenti, Sorun, Çözüm

index.template.php
Bul:
Kod: [Seç]
</head>
<body>';

Üstüne ekle:
Kod: [Seç]
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content").find("[id^=\'tab\']").hide(); // Hide all content
    $("#tabs li:first").attr("id","current"); // Activate the first tab
    $("#content #tab1").fadeIn(); // Show first tab\'s content
   
    $(\'#tabs a\').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return;       
        }
        else{             
          $("#content").find("[id^=\'tab\']").hide(); // Hide all content
          $("#tabs li").attr("id",""); //Reset id\'s
          $(this).parent().attr("id","current"); // Activate this
          $(\'#\'   $(this).attr(\'name\')).fadeIn(); // Show content for the current tab
        }
    });
});
</script>

board.index.template.php
Bul:
Kod: [Seç]
<div id="boardindex_table">
<table class="table_list">';

Üstüne ekle:
Kod: [Seç]
<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>   
</ul>

<div id="content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>

index.css en alta ekle:
Kod: [Seç]
#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd); 
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}

#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em; 
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd); 
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0; 
}

#tabs #current a,
#tabs #current a::after {
  background: #fff;
  z-index: 3;
}

#content {
  background: #fff;
  padding: 2em;
  height: 220px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

« Son Düzenleme: 05 Mayıs 2014, 13:30 Gönderen: bolubeyi »

03 Mayıs 2014, 20:33
Yanıtla #1
  • *
    • İleti: 178
    • Karma: 3
    • buyuknet
    • Profili Görüntüle

çok güzel paylaşım teşekkürler


 bu ozellıgı farklı bır alanda kullanırım artık çok işe yarıyor gerçekten


03 Mayıs 2014, 20:42
Yanıtla #2
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Tabi ihtiyaca binaen birçok yerde kullanılabilir.


03 Mayıs 2014, 21:52
Yanıtla #3
  • *
    • İleti: 5
    • Karma: 1
    • Forumfirtina
    • Profili Görüntüle

gercekden harika bir paylasim tskler ellinize saglik bolubeyi


06 Mayıs 2014, 13:14
Yanıtla #4
  • *
    • İleti: 14
    • Karma: 1
    • flatcast.biz
    • Profili Görüntüle

Emeğinize sağlık Hocam,kıymetli bir paylaşım olmuş.


07 Mayıs 2014, 13:58
Yanıtla #5
  • *
    • İleti: 14
    • Karma: 0
    • RCKolik
    • Profili Görüntüle

İnanmayacaksınız ama forumda sizin uygulamayı fark edip, acaba bu nasıl yapılıyor derken siz konuyu meğer zaten paylaşmışsınız. Elinize sağlık  :) En kısa süre içerisinde kendi forumumda deneyeceğim.


07 Mayıs 2014, 13:59
Yanıtla #6
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

iyi günlerde kullanmanız dileğimle kolay gele.


07 Mayıs 2014, 14:04
Yanıtla #7
  • *
    • İleti: 14
    • Karma: 0
    • RCKolik
    • Profili Görüntüle

iyi günlerde kullanmanız dileğimle kolay gele.
Teşekkür ederim. Şimdilik son olarak çok şık bir tasarıma sahip "Modifikasyon Listesi" ile ilgili bir paylaşımda bulunacak mısınız üstad ? Arattım ama bulamadım.


07 Mayıs 2014, 15:22
Yanıtla #8
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

easymenumaker programı ile menünüzü hazırlayın. siteye eklemek için yardımcı olurum.


07 Mayıs 2014, 22:07
Yanıtla #9
  • *
    • İleti: 14
    • Karma: 0
    • RCKolik
    • Profili Görüntüle

easymenumaker programı ile menünüzü hazırlayın. siteye eklemek için yardımcı olurum.
Tamam cok Tesekkur ederim ustad  :)