Articles

Our Services

Tab Menu Dengan CSS dan JavaScript

Dalam membuat website, pasti membutuhkan tampilan yang sangat menarik. Baik dari design, pengaturan konten sampai penempatan menu agar dapat dilihat lebih mudah.

Membuat Tab Menu dengan CSS dan JavaScript, tidak lah sulit, tergantung kebutuhan apa yang ingin kita tampilkan. Berikut beberapa koding singkat untuk membuat Tab Menu dengan CSS dan JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab Menu Dengan CSS dan JavaScript </title>
<style type="text/css">
    #tabs {
        display: block;
        float: left;
        width: 200px;
    }
    .panel {
        border: solid 1px #D8D8D8;
        font-family:tahoma;
        font-size:14px;
        border-top: none;
        background-color: #FFFFFF;
        padding: 0px;
        width: 180px;
        overflow: auto;
        clear: left;
    }
    .tab_bdr {
        padding: 0px;
        width: 180px;
        border: 0px;
        border: 1px solid #CCCCCC;
        height: 4px;
        margin:0px;
        background: #CCCCCC;
        clear: left;
        font-size: 0px;
    }
    .tab {
        font-family: tahoma;
        font-size: 12px;
        background:#00F;
        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: 12px;
        background: #CCCCCC;
        color: #FFFFFF;
        cursor: pointer;
        border: none;
        border-bottom: 1px solid #CCCCCC;
        height: 19px;
        padding-top: 3px;
        margin: 0px;
        width:60px;
        float: left;
        text-decoration: none;
    }
</style>
<script language="JavaScript" type="text/javascript">
    var panels = new Array('panel1', 'panel2', 'panel3');
    var tabs = new Array('tab1', 'tab2', 'tab3');
    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';
        }
    }
</script>
</head>

<body>
    <div id="tabs">
        <div id="tab1" class="tab_sel" align="center" onClick="javascript: displayPanel('1');">Home</div>
        <div id="tab2" class="tab" style="margin-left:1px;" align="center" onClick="javascript: displayPanel('2');">About Us</div>
                    <div id="tab3" class="tab" style="margin-left:1px;" align="center" onClick="javascript: displayPanel('3');">Products</div>
    </div>

    <div class="tab_bdr"></div>
    <div class="panel" id="panel1" style="display: block">Ini halaman home</div>
    <div class="panel" id="panel2" style="display: none">Tentang kami</div>
          <div class="panel" id="panel3" style="display: none">Beberapa products kami</div>
</body>
</html>