--> Skip to main content
Home Pemrograman Web Panduan membuat menu tab dengan css

Panduan membuat menu tab dengan css

Cara membuat tab pada web
Dalam edisi tutorial kali ini, kita akan mempelajari bagaimana cara membuat tab pada pada web. Seringkali dalam pembuatan sebuah website, kita menyajikan suatu halaman yang berbeda dengan membuat navigasi menu dengan menggunakan tag <a>. Tag <a> ini berfungsi untuk menghubungkan antara satu halaman dengan halaman lain.

 Mungkin kita pernah melihat sebuah website  yang dalam satu halaman menyajikan berbagai informasi yang berbeda-beda, seolah-olah seperti halaman yang berbeda seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Membuat menu tab pada web
Gambar.1 Contoh Tab Menu

Anda dapat melihat hasil percobaan dan mendownload keseluruhan source code dari contoh pembuatan menu tab pada web yang terdapat pada link bagian bawah.

Percobaan

  • Buat file dengan nama tab.css yang berisikan source code sebagai berikut:
  
  1. .tabs {
  2.   position: relative;
  3.   width: 680px;
  4.   min-height: 350px;
  5.   margin: 1.2em auto 1em auto;
  6. }
  7. .tabs .tab {
  8.   display: inline-block;
  9.   margin: 0 -1px;
  10. }
  11. .tabs .tab label {
  12.   position: relative;
  13.   margin: 0;
  14.   background: #dadada;
  15.   border: 1px solid #ccc;
  16.   border-bottom: none;
  17.   -moz-border-radius:.5em;
  18.   -webkit-border-radius:.5em;
  19.   -khtml-border-radius:.5em;
  20.   border-radius:.5em;
  21.   padding: .5em .6em;
  22.   font-weight: 700;
  23.   cursor: pointer;
  24. }
  25. .tabs .tab [type=radio] {
  26.   display: none;
  27. }
  28. .tabs .tab [type=radio]:checked ~ label {
  29.   background: #d8fbda;
  30.   border-bottom: 1px solid white;
  31.   text-decoration: underline;
  32. }
  33. .tabs .tab [type=radio]:checked ~ label ~ .content {
  34.   display: block;
  35. }
  36. .tabs .tab .content {
  37.   display:none;
  38.   position: absolute;
  39.   top: 1.7em;
  40.   left: 0;
  41.   right: 0;
  42.   background: #fdfdee;
  43.   border: 1px solid #ccc;
  44.   padding: .3em .8em;
  45. }


  • Kemudian buat file style.css. File ini berfungsi untuk membentuk layout web yang berisikan source code sebagai berikut:
  
  1. root {
  2.     display: block;
  3. }
  4. /*Membuat bentuk dari kotak1 samapai kotak 7*/
  5. #kotak1{
  6.     width:1000px;/*Lebar kotak*/
  7.     height:1090px;/*Tinggi kotak*/
  8.     border:1px solid #cdcdcd; /*Border kotak*/
  9.     background:#f0f3f6;/*Background/warna kotak*/
  10.     margin:auto;/*Supaya kotak berada di tengah*/
  11. }
  12. #kotak2{
  13.     width:960px;
  14.     height:150px;
  15.     border:1px solid #cdcdcd;
  16.     background:#639fce;
  17.     margin:auto;
  18.     margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/
  19. }
  20. #kotakslider
  21. {
  22.         width:960px;
  23.         height:360px;
  24.         border:1px solid #cdcdcd;
  25.        
  26.         margin:auto;
  27.         margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/
  28. }
  29. #kotak4{
  30.     width:960px;
  31.     height:500px;
  32.     border:1px solid #cdcdcd;
  33.     background:#639fce;
  34.     margin:auto;
  35.     margin-top:5px;
  36. }
  37. #kotak5{
  38.     width:240px;
  39.     height:485px;
  40.     border:1px solid #cdcdcd;
  41.     background:#e6e2e2;
  42.     float:left;/*Supaya kotak berada di pinggir kiri*/
  43.     margin-left:5px;
  44.     margin-top:5px;
  45. }
  46. #kotak6{
  47.     width:700px;
  48.     height:485px;
  49.     border:1px solid #cdcdcd;
  50.     background:#e6e2e2;
  51.     float:left;
  52.     margin-left:5px;
  53.     margin-top:5px;
  54.     margin-right:5px;
  55. }
  56. #kotak7{
  57.     width:960px;
  58.     height:30px;
  59.     border:1px solid #cdcdcd;
  60.     background:#2fb075;
  61.     margin:auto;
  62.     margin-top:5px;
  63. }

  • Kemudian buatlah file slider.php File ini mengandung image yang akan menjadi slider. Kodenya :
  
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="styles/coin-slider.css" />
  3. <script type="text/javascript" src="scripts/slider/jquery-1.4.2.min.js"></script>
  4. <script type="text/javascript" src="scripts/slider/script.js"></script>
  5. <script type="text/javascript" src="scripts/slider/coin-slider.min.js"></script>
  6. </head>
  7.       <div class="slider">
  8.         <div id="coin-slider">
  9.                 <a href="#"><img src="images/slider/1.jpg" width="940" height="310" alt="" /> </a>
  10.                 <a href="#"><img src="images/slider/2.jpg" width="940" height="310" alt="" /> </a>
  11.                 <a href="#"><img src="images/slider/3.jpg" width="940" height="310" alt="" /> </a>
  12.                 <a href="#"><img src="images/slider/4.jpg" width="940" height="310" alt="" /> </a>
  13.                 <a href="#"><img src="images/slider/5.jpg" width="940" height="310" alt="" /> </a>
  14.                 <a href="#"><img src="images/slider/6.jpg" width="940" height="310" alt="" /> </a>
  15.                 <a href="#"><img src="images/slider/7.jpg" width="940" height="310" alt="" /> </a>
  16.                 <a href="#"><img src="images/slider/8.jpg" width="940" height="310" alt="" /> </a>
  17.                 </div>
  18.         <div class="clr"></div>
  19.       </div>


  • Terakhir kita membuat file index.php yang mengandung source code sebagai berikut :
  
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title></title>
  5. <!-- Memanggil file css -->
  6. <LINK rel="stylesheet" href="style.css" />
  7. <LINK rel="stylesheet" href="tab.css" TYPE="text/css">
  8. <script TYPE="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
  9. </head>
  10. <body>        
  11. <div id="kotak1"><!-- Membuat Kotak 1-->
  12. <div id="kotak2"></div>
  13. <div id="kotakslider">
  14. <?php include "slider.php" ?>
  15. </div>
  16. <div id="kotak4">
  17. <div id="kotak5">              
  18. </div>
  19. <div id="kotak6">
  20. <div class="tabs">
  21. <div class="tab">
  22. <input TYPE="radio" id="tab-1" name="tab-group-1" checked />
  23. <label FOR="tab-1">Tab-1</label>
  24. <div class="content">
  25. <p style="text-align:justify;"><img src="images/slider/puyuh.jpg" style="float:right; margin:0 9px 3px 15px;" />Seringkali kita mendengar ucapan "Anaknya pintar seperti Ayahnya". Selain faktor genetik yang berpengaruh dalam kecerdasaan seseorang, masih banyak faktor lain yang turut andil dalam masalah kecerdasaan ini. Seperti yang termaktub dalam buku "The Divine Message of DNA (Tuhan dalam Gen Kita)" karangan Karazuo Mukarami-ilmuan genetika jepang yang terkenal mengatakan : Ada kemungkinan si Ayah yang jenius, tapi si anak tidak memiliki kecerdasan seperti si Ayahnya. Contohnya, putra Goethe memiliki kecerdasan dibawah rata-rata, juga keadaan fisik yang lemah. Atau anda mungkin bisa menemukan saudara kandung anda tidak secerdas anda, hal ini kemungkinan dipengaruhi oleh dua faktor : pengaruh lingkungan dan mekanisme nyala/padam genetik.Bagi anda yang tertarik memahaminya lebih lanjut tentang buku tersebut,bisa dieksplor sendiri. Faktor lain dalam membantu peranan kecerdasan anak adalah tentu masalah gizi.</p></div></div>
  26. <div class="tab">
  27. <input TYPE="radio" id="tab-2" name="tab-group-1" />
  28. <label FOR="tab-2">Tab-2</label>
  29. <div class="content">
  30. <p style="text-align:justify;"><img src="images/slider/puyuh.jpg" style="float:left; margin:0 9px 3px 0;" />Seringkali kita mendengar ucapan"Anaknya pintar seperti Ayahnya". Selain faktor genetik yang berpengaruh dalam kecerdasaan seseorang, masih banyak faktor lain yang turut andil dalam masalah kecerdasaan ini. Seperti yang termaktub dalam buku "The Divine Message of DNA (Tuhan dalam Gen Kita)" karangan Karazuo Mukarami-ilmuan genetika jepang yang terkenal mengatakan : Ada kemungkinan si Ayah yang jenius, tapi si anak tidak memiliki kecerdasan seperti si Ayahnya. Contohnya, putra Goethe memiliki kecerdasan dibawah rata-rata, juga keadaan fisik yang lemah. Atau anda mungkin bisa menemukan saudara kandung anda tidak secerdas anda, hal ini kemungkinan dipengaruhi oleh dua faktor : pengaruh lingkungan dan mekanisme nyala/padam genetik.Bagi anda yang tertarik memahaminya lebih lanjut tentang buku tersebut,bisa dieksplor sendiri. Faktor lain dalam membantu peranan kecerdasan anak adalah tentu masalah gizi.</p></div></div></div>
  31. </div></div>
  32. <div id="kotak7"></div></div>
  33. </body>
  34. </html>



You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar