17 November 2009

Belajar CSS (Membuat Menu Tab Horizontal di Website



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>


Untuk Melihat contohnya klik aja disini

Bagi yang sekedar mau masukin Tab nya aja, silahkan input Font yang berwarna merah diantara dan untuk melihat contohnya klik disini.... If you enjoyed this post, please make sure you subscribe to my RSS feed!

No comments:

Post a Comment

Post your comments and give feed back about this article, You can use some HTML tags, such as Bold, Italic,
Thank's For Your Comment

Subscribe to: Post Comments (Atom)