Tab CSS Menu Sederhana

Suka dengan CSS menu? cobalah membuat CSS menu anda sendiri.
Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa memodifikasinya
Code nya:

——————————

DHTML Tab,JavaScript Tab

#tabs {display: block;float: left;width: 160px;}
.panel {border: solid 1px #D8D8D8;border-top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
.tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid #645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
.tab{font-family:tahoma; FONT-SIZE: 11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom: 1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
.tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}

var panels = new Array(‘panel1′, ‘panel2′); // IDs of the content panels must be put here
var tabs = new Array(‘tab1′, ‘tab2′); // IDs of the tabs must be put here
function displayPanel(nval)
{
for(i = 0; i < panels.length; i++)
{
document.getElementById(panels[i]).style.display = (nval-1 == i) ? ‘block’:'none’;
document.getElementById(tabs[i]).className=(nval-1 == i) ? ‘tab_sel’:'tab’;
}
}

Tab 1

Tab 2

1

2

——————————

contoh jadi:
Suka dengan CSS menu? cobalah membuat CSS menu anda sendiri.
Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa memodifikasinya
Code nya:

——————————

DHTML Tab,JavaScript Tab

#tabs {display: block;float: left;width: 160px;}
.panel {border: solid 1px #D8D8D8;border-top: none;background-color: #FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
.tab_bdr{padding: 0px;width: 158px;border: 0px;border: 1px solid #645DB5;height: 4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
.tab{font-family:tahoma; FONT-SIZE: 11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom: 1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}
.tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px; float:left; text-decoration:none;}

var panels = new Array(‘panel1′, ‘panel2′); // IDs of the content panels must be put here
var tabs = new Array(‘tab1′, ‘tab2′); // IDs of the tabs must be put here
function displayPanel(nval)
{
for(i = 0; i < panels.length; i++)
{
document.getElementById(panels[i]).style.display = (nval-1 == i) ? ‘block’:'none’;
document.getElementById(tabs[i]).className=(nval-1 == i) ? ‘tab_sel’:'tab’;
}
}

Tab 1

Tab 2

1

2

——————————