TUTORIAL

Membuat Tab Menu sederhana dengan JQuery

シックス , TUTORIAL
0
6357

Tab Menu adalah Jendela tab yang umumnya berisi menu tool dan fitur lainnya yang memiliki fungsi tertentu. Tab telah menjadi fitur umum dalam antarmuka pengguna web, dalam posting ini saya membuat contoh membuat tab dinamis dengan JQuery.

1. download jquery.tools.min di situs resminya Jquery.

jQuery Tools v1.2.7 - The missing UI library for the Web

2. Buatlah struktur file CSS dengan nama tabs-1.css 



/* root element for tabs  */
ul.tabs { 
   list-style:none; 
   margin:0 !important; 
   padding:0; 
   border-bottom:1px solid #666;  
   height:30px;
}

/* single tab */
ul.tabs li { 
   float:left;     
   text-indent:0;
   padding:0;
   margin:0 !important;
   list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
   background: url(img/blue.png) no-repeat -420px 0;
   font-size:11px;
   display:block;
   height: 30px;  
   line-height:30px;
   width: 134px;
   text-align:center; 
   text-decoration:none;
   color:#333;
   padding:0px;
   margin:0px;    
   position:relative;
   top:1px;
}

ul.tabs a:active {
   outline:none;      
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
   background-position: -420px -31px; 
   color:#fff;    
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
   background-position: -420px -62px;     
   cursor:default !important; 
   color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.s            { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover  { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l            { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover  { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

/* width 3 */
ul.tabs a.xl           { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover     { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */ 
div.panes div.pane {
   display:none;      
}

/* tab pane styling */
div.panes div {
   display:none;      
   padding:15px 10px;
   border:1px solid #999;
   border-top:0;
   height:100px;
   font-size:14px;
   background-color:#fff;
}

/* end tab styling */

body {
   font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
:focus {
  -moz-outline-style:none;
}

/* root element for tabs  */
ul.tabs { 
   list-style:none; 
   margin:0 !important; 
   padding:0; 
   border-bottom:1px solid #666;  
   height:30px;
}

/* single tab */
ul.tabs li { 
   float:left;     
   text-indent:0;
   padding:0;
   margin:0 !important;
   list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
   background: url(img/blue.png) no-repeat -420px 0;
   font-size:11px;
   display:block;
   height: 30px;  
   line-height:30px;
   width: 134px;
   text-align:center; 
   text-decoration:none;
   color:#333;
   padding:0px;
   margin:0px;    
   position:relative;
   top:1px;
}

ul.tabs a:active {
   outline:none;      
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
   background-position: -420px -31px; 
   color:#fff;    
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
   background-position: -420px -62px;     
   cursor:default !important; 
   color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.s            { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover  { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l            { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover  { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

/* width 3 */
ul.tabs a.xl           { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover     { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */ 
div.panes div.pane {
   display:none;      
}

/* tab pane styling */
div.panes div {
   display:none;      
   padding:15px 10px;
   border:1px solid #999;
   border-top:0;
   height:100px;
   font-size:14px;
   background-color:#fff;
}

/* end tab styling */

body {
   font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
:focus {
  -moz-outline-style:none;
}

 

3. Buatlah file HTML dengan nama tabs1.html

 


 <html>
  <head>
    <link type="text/css" href="css/tabs-1.css" rel="stylesheet" />   
    <script src="jquery.tools.min.js"></script>

    <script type="text/javascript"> 
      $(document).ready(function(){
        $("ul.tabs").tabs("div.panes > div");
      });
   </script>
  </head>
    <body>
      <!-- tabs -->
      <ul class="tabs">
         <li><a class="current" href="#">Tab 1</a></li>
         <li><a class="" href="#">Tab 2</a></li>
         <li><a class="" href="#">Tab 3</a></li>
      </ul>

      <!-- panes (content untuk masing-masing tab) -->
      <div class="panes">
         <div style="display: block;">Content untuk Tab 1.</div>
         <div style="display: none;">Content untuk Tab 2.</div>
         <div style="display: none;">Content untuk Tab 3.</div>
      </div>
  </body>
</html>

 

 

Hasilnya adalah sebagai berikut :

 

Berikut source codenya hasil tutorial ini, klik salah satu iklan setelah download sebagai donatur.

DOWNLOAD

0 Comments

×