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

Download Here

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

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

Arsip Blog

Popular Posts

Label

Pengunjung