Cara Membuat Tabbed Menu PHP Menggunakan Css JQuery

Dalam sebuah aplikasi php kerap kali kita temukan tabs dimana tab-tab tersebut mempunyai fungsi yang berbeda

Kita akan kupas tuntas bagaimana cara membuat tab seperti pada gambar dibawah ini

1. yang perlu kita lakukan adalah mendownload jquery kita bisa download disini

2.siapkan file index.htm ataupun file project kita

3.siapkan file untuk css

step 1 file index.html

01<pre><head>
02<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
03<title>Membuat Tabs Dengan CSS dan jQuery</title>
04<link rel="stylesheet" type="text/css" href="css/reset-font.css" media="screen" />
05<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
06<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
07<script type="text/javascript">
08$(document).ready(function() {
09    $('#tab1').fadeIn('slow'); //tab pertama ditampilkan
10    $('ul#nav li a').click(function() { // jika link tab di klik
11        $('ul#nav li a').removeClass('active'); //menghilangkan class active (yang tampil)
12        $(this).addClass("active"); // menambahkan class active pada link yang diklik
13        $('.tab_konten').hide(); // menutup semua konten tab
14        var aktif = $(this).attr('href'); // mencari mana tab yang harus ditampilkan
15        $(aktif).fadeIn('slow'); // tab yang dipilih, ditampilkan
16        return false;
17    });
18 
19});
20 
21</script>
22</head>
23 
24<body>
25<div id="container">
26    <h1>Membuat Tabs Dengan CSS dan jQuery</h1>
27    <ul id="nav">
28        <li><a href="#tab1" class="active">Home</a></li>
29        <li><a href="#tab2">About</a></li>
30        <li><a href="#tab3">Contact</a></li>
31    </ul>
32    <div class="clear"></div>
33    <div id="konten">
34        <div style="display: none;" id="tab1" class="tab_konten">
35            <h2>Home</h2>
36            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut quam. Pellentesque vestibulum, velit eget venenatis auctor, quam turpis consequat quam, et ultricies leo neque et tortor. Quisque ut nulla non neque facilisis mattis. Sed quis nibh blandit lacus laoreet feugiat. <a href="#" title="Online Store">Vestibulum</a> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt erat nec risus accumsan tincidunt. Nunc augue massa, accumsan a, mollis vitae, porttitor eu, leo. Vestibulum purus. </p>
37        </div>
38 
39        <div style="display: none;" id="tab2" class="tab_konten">
40            <h2>About</h2>
41            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut quam. Pellentesque vestibulum, velit eget venenatis auctor, quam turpis consequat quam, et ultricies leo neque et tortor. Quisque ut nulla non neque facilisis mattis. Sed quis nibh blandit lacus laoreet feugiat. <a href="#" title="Online Store">Vestibulum</a> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt erat nec risus accumsan tincidunt. Nunc augue massa, accumsan a, mollis vitae, porttitor eu, leo. Vestibulum purus. </p>
42        </div>
43 
44        <div style="display: none;" id="tab3" class="tab_konten">
45            <h2>Contact</h2>
46            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut quam. Pellentesque vestibulum, velit eget venenatis auctor, quam turpis consequat quam, et ultricies leo neque et tortor. Quisque ut nulla non neque facilisis mattis. Sed quis nibh blandit lacus laoreet feugiat. <a href="#" title="Online Store">Vestibulum</a> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt erat nec risus accumsan tincidunt. Nunc augue massa, accumsan a, mollis vitae, porttitor eu, leo. Vestibulum purus. </p>
47        </div>
48    </div>
49    <div id="footer">read other cool stuff at my <a href="http://d3dykurniadi.wordpress.com" title="dedy kurniadi">blog</a>, back to <a href="#" title="back to article">article</a> or <a href="#" title="download source">download</a> this source :)</div>
50</div>
51</body>
52</html></pre>

setelah code diatas dibuat kita siapkan du file css yaitu screen.css dan reset-font.css

screen.css

01<pre>/* ------------------------------
02Struktur Halaman
03------------------------------ */
04body{
05    color:#696969;
06    background:#E5E5E5;
07}
08#container {
09    margin:auto;
10    margin-top:60px;
11    width:600px;
12    display:block;
13}
14div.clear{
15    clear:both;
16}
17h1{
18    font-size:1.9em;
19    color:#494949;
20}
21h2{
22    font-size:1.6em;
23}
24a{
25    color:#29b8f3;
26    text-decoration:none;
27}
28a:hover{
29    color:#D65703;
30}
31#footer{
32    padding:5px 20px;
33    text-align:right;
34}
35/* ------------------------------
36Konten = Tabs + Konten Tab
37------------------------------ */
38#konten{
39    padding:20px;
40    background:#FFF;
41    color:#555;
42}
43#konten p{
44    text-indent:15px;
45    line-height:165%;
46}
47/* ------------------------------
48Navigasi Tabs
49------------------------------ */
50ul#nav {
51    padding:20px 5px 10px 0;
52}
53ul#nav li{
54    display:inline;
55    float:left;
56    position:relative;
57    margin-right:5px;
58}
59ul#nav li a{
60    background:#a5a5a5;
61    padding:10px 25px;
62    color:#FFF;
63    text-decoration:none;
64    font-weight:bold;display: block;
65}
66ul#nav li a:hover{
67    background:#29b8f3;
68}
69ul#nav li a.active, ul#nav li a.active:hover{
70    background:#FFF;
71    color:#555;
72}</pre>

kemudian siapkan juga file yang ketiga yaitu reset-font.css

01<pre>/* ------------------------------
02Eric Meyer CSS Reset
03------------------------------ */
04html, body, div, span, applet, object, iframe,
05h1, h2, h3, h4, h5, h6, p, blockquote, pre,
06a, abbr, acronym, address, big, cite, code,
07del, dfn, em, font, img, ins, kbd, q, s, samp,
08small, strike, strong, sub, sup, tt, var,
09b, u, i, center,
10dl, dt, dd, ol, ul, li,
11fieldset, form, label, legend,
12table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background:transparent; }
13body { line-height: 1; }
14ol, ul { list-style: none; }
15blockquote, q { quotes: none; }
16blockquote:before, blockquote:after,
17q:before, q:after { content: ''; content: none; }
18:focus { outline: 0; }
19ins { text-decoration: none; }
20del { text-decoration: line-through; }
21table { border-collapse: collapse; border-spacing: 0; }
22/* ------------------------------
23Font CSS by Yahoo
24------------------------------ */
25body{font:13px/1.231 Georgia, "Times New Roman", Times, serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% Georgia,"Times New Roman", Times, serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}</pre>