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

 

Tab1 Tab2 Tab3 Tab4 Tab5

YOUR CODE-CONTENT1

YOUR CODE-CONTENT2

YOUR CODE-CONTENT3

YOUR CODE-CONTENT4

YOUR CODE-CONTENT5