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>
jangan lupa masukan file jquery pada folder js setelah semua langkah sudah dijalankan coba sekarang kita akses localhost/folderkita

Source : http://d3dykurniadi.wordpress.com/2011/10/22/membuat-tab-dengan-css-dan-jquery/
Labels:

Artikel Lainnya