Bayram Cigerli Blog

Bigger İnfo Center and Archive
  • Herşey Dahil Sadece 350 Tl'ye Web Site Sahibi Ol

    Hızlı ve kolay bir şekilde sende web site sahibi olmak istiyorsan tek yapman gereken sitenin aşağısında bulunan iletişim formu üzerinden gerekli bilgileri girmen. Hepsi bu kadar.

  • Web Siteye Reklam Ver

    Sende web sitemize reklam vermek veya ilan vermek istiyorsan. Tek yapman gereken sitenin en altında bulunan yere iletişim bilgilerini girmen yeterli olacaktır. Ekip arkadaşlarımız siziznle iletişime gececektir.

  • Web Sitemizin Yazarı Editörü OL

    Sende kalemine güveniyorsan web sitemizde bir şeyler paylaşmak yazmak istiyorsan siteinin en aşağısında bulunan iletişim formunu kullanarak bizimle iletişime gecebilirisni

Kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Basit Tab Menu Yapma, Tab Menu Nasıl Yapılır, Tab Menu Kodları, Tab Menu Mantığı Nedir

Öncelikle merhabalar, bugün sizlerle Basit ve kullanışlı bir tab menu yapmayı ve bunun kodlamasını sizlere anlatacağız, Sizin tek yapmanız gereken kopyala ve yapıştır. İlgili alanlarını değiştirmeniz yeterli olacaktır. Biz gerekli olan yerleri renklendirdik. Sadece renkli alanları değiştirmeniz sizin için yeterli olacaktır.

Adım-1: Css Kodlarını Ekleme

<style id="tab2-css-code">

/*--------------------------------------------------- TABS 2 */
div.TabView2 div.Tabs2 {
height:30px;
margin-top:30px;
overflow: hidden;
}
div.TabView2 div.Tabs2 a {
float: left;
display: block;
width: 78px;
text-align: center;
padding: 6px 0px 6px;
border: 1px solid #333333;
background-color: #000000;
color: #CCCCCC;
}
div.TabView2 div.Tabs2 a:hover {
background-color: #111111;
border:1px solid #666666;
text-decoration:none;
}
div.TabView2 div.Tabs2 a.Active {
background-color: #111111;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #111111;
}
div.TabView2 div.Pages {
clear: both;
background-color: #111111;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
padding: 0px 0px 10px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad {
padding: 0px 0px;
}
</style>



Adım-2: Javascript Doslayalarını Siteye Ekle

<script type="text/javascript">
function tabview2_aux(TabView2Id, id)
{
  var TabView2 = document.getElementById(TabView2Id);

// ----- Tabs -----
  var Tabs2 = TabView2.firstChild;
  while (Tabs2.className != "Tabs2" ) Tabs2 = Tabs2.nextSibling;

  var Tab2 = Tabs2.firstChild;
  var i   = 0;

  do
  {
    if (Tab2.tagName == "A")
    {
      i++;
      Tab2.href      = "javascript:tabview2_switch('"+TabView2Id+"', "+i+");";
      Tab2.className = (i == id) ? "Active" : "";
      Tab2.blur();
    }
  }
  while (Tab2 = Tab2.nextSibling);

// ----- Pages -----
  var Pages = TabView2.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions ----- 
function tabview2_switch(TabView2Id, id) { tabview2_aux(TabView2Id, id); }

function tabview2_initialize(TabView2Id) { tabview2_aux(TabView2Id,  1); }
</script>

Adım-3: Html Kodlarını Sitene Ekle



<div class="TabView2" id="TabView2">
<div class="Tabs2" style="width: 420px;">
<a><b>Tab1</b></a>
<a><b>Tab2</b></a>
<a><b>Tab3</b></a>
<a><b>Tab4</b></a>
 <a><b>Tab5</b></a> 
</div>
<div class="Pages" style="height: 2200px; width: 420px;">

 <div class="Page">
<div class="Pad"><br />
  YOUR CODE-CONTENT1</div>
</div> 
  
<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT2</div>
</div>

<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT3</div>
</div>

<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT4</div>
</div>

<div class="Page">
<div class="Pad">
<b>
<br />
YOUR CODE-CONTENT5


</b>
</div>
</div>

</div></div>



Adım-4: Yine tüm html kodların bitiminden sonra JavaScript kodlaırnı yapıştırın


<script type="text/javascript">
tabview2_initialize('TabView2');
</script>




Demo-Önizleme

 

YOUR CODE-CONTENT1

YOUR CODE-CONTENT2

YOUR CODE-CONTENT3

YOUR CODE-CONTENT4

YOUR CODE-CONTENT5