Cara Membuat Tabbed Menu PHP Menggunakan Css JQuery

Juni 22, 2012 | | 0 komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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/

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com

NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Cara Membuat Tabbed Menu PHP Menggunakan Css JQuery, Diterbitkan oleh scodeaplikasi pada Jumat, 22 Juni 2012. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Cara Membuat Tabbed Menu PHP Menggunakan Css JQuery

Terimakasih Telah mengunjungi website Kami..!!

Tawk.to

Pencarian

Blog

Populer

Populer

My Ads

Artikel

Artikel