Reload Page ❖ Creating Tab Menu With jQueryweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

http://example.com/style.css X

 
1
#itptabmenu-wrap {
2
  width:440px;
3
  margin:0px auto;
4
}
5
h1 {
6
  font:bold 40px Sans-Serif;
7
  margin:0 0 20px 0;
8
}
9
.hide {
10
  position:absolute;
11
  top:-9999px;
12
  left:-9999px;
13
}
14
#itptabmenu {
15
  background:#eee;
16
  padding:10px;
17
  margin:0 0 20px 0;
18
  -moz-box-shadow:0 0 5px #666;
19
  -webkit-box-shadow:0 0 5px #666;
20
}
21
#itptabmenu .nav {
22
  overflow:hidden;
23
  margin:0 0 10px 0;
24
}
25
#itptabmenu .nav li {
26
  width:97px;
27
  float:left;
28
  margin:0 10px 0 0;
29
}
30
#itptabmenu .nav li.last {
31
  margin-right:0;
32
}
33
#itptabmenu .nav li a {
34
  display:block;
35
  padding:5px;
36
  background:#959290;
37
  color:white;
38
  font-size:10px;
39
  text-align:center;
40
  border:0;
41
}
42
#itptabmenu .nav li a:hover {
43
  background-color:#111;
44
}
45
#itptabmenu ul {
46
  list-style:none;
47
}
48
#itptabmenu ul li a {
49
  display:block;
50
  border-bottom:1px solid #666;
51
  padding:4px;
52
  color:#666;
53
}
54
#itptabmenu ul li a:hover {
55
  background:#fe4902;
56
  color:white;
57
}
58
#itptabmenu ul li:last-child a {
59
  border:none;
60
}
61
#itptabmenu ul li.itptabmenu-one a.current,
62
#itptabmenu ul.featured li a:hover {
63
  background-color:#0575f4;
64
  color:white;
65
}
66
#itptabmenu ul li.itptabmenu-two a.current,
67
#itptabmenu ul.core li a:hover {
68
  background-color:#d30000;
69
  color:white;
70
}
71
#itptabmenu ul li.itptabmenu-three a.current,
72
#itptabmenu ul.jquerytuts li a:hover {
73
  background-color:#8d01b0;
74
  color:white;
75
}
76
#itptabmenu ul li.nav-four a.current,
77
#itptabmenu ul.classics li a:hover {
78
  background-color:#FE4902;
79
  color:white;
80
}
xxxxxxxxxx
 
​

http://example.com/script.js X

​x
 
1
(function($) {
2
​
3
    $.organicTabs = function(el, options) {
4
5
        var base = this;
6
        base.$el = $(el);
7
        base.$nav = base.$el.find(".nav");
8
9
        base.init = function() {
10
11
            base.options = $.extend({},$.organicTabs.defaultOptions, options);
12
13
            // Accessible hiding fix
14
            $(".hide").css({
15
                "position": "relative",
16
                "top": 0,
17
                "left": 0,
18
                "display": "none"
19
            });
20
21
            base.$nav.on("click", "li > a", function() {
22
23
                // Figure out current list via CSS class
24
                var curList = base.$el.find("a.current").attr("href").substring(1),
25
26
                // List moving to
27
                    $newList = $(this),
28
29
                // Figure out ID of new list
30
                    listID = $newList.attr("href").substring(1),
31
32
                // Set outer wrapper height to (static) height of current inner list
33
                    $allListWrap = base.$el.find(".list-wrap"),
34
                    curListHeight = $allListWrap.height();
35
                $allListWrap.height(curListHeight);
36
37
                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
38
39
                    // Fade out current list
40
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
41
42
                        // Fade in new list on callback
43
                        base.$el.find("#"+listID).fadeIn(base.options.speed);
44
45
                        // Adjust outer wrapper to fit new list snuggly
46
                        var newHeight = base.$el.find("#"+listID).height();
47
                        $allListWrap.animate({
48
                            height: newHeight
49
                        });
50
51
                        // Remove highlighting - Add to just-clicked tab
52
                        base.$el.find(".nav li a").removeClass("current");
53
                        $newList.addClass("current");
54
55
                    });
56
57
                }
58
59
                // Don't behave like a regular link
60
                // Stop propegation and bubbling
61
                return false;
62
            });
63
64
        };
65
        base.init();
66
    };
67
68
    $.organicTabs.defaultOptions = {
69
        "speed": 300
70
    };
71
72
    $.fn.organicTabs = function(options) {
73
        return this.each(function() {
74
            (new $.organicTabs(this, options));
75
        });
76
    };
77
78
})(jQuery);
79
        $(function() {
80
81
            $("#itptabmenu").organicTabs();
82
        });
38
 
1
<div id="itptabmenu-wrap">
2
 <div id="itptabmenu">
3
  <ul class="nav">
4
   <li class="itptabmenu-one"><a href="#featured" class="current">CSS 3</a></li>
5
   <li class="itptabmenu-two"><a href="#core">Label</a></li>
6
   <li class="itptabmenu-three"><a href="#jquerytuts">jQuery</a></li>
7
  </ul>
8
  <div class="list-wrap">
9
   <ul id="featured">
10
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
11
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
12
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
13
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
14
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
15
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
16
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 1</a></li>
17
   </ul>
18
   <ul id="core" class="hide">
19
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
20
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
21
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
22
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
23
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
24
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
25
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 2</a></li>
26
   </ul>
27
   <ul id="jquerytuts" class="hide">
28
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
29
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
30
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
31
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
32
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
33
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
34
    <li><a href="http://idtutorplus.blogspot.com/2012/11/membuat-tab-menu-dengan-jquery.html">Tab Menu jQuery 3</a></li>
35
   </ul>
36
  </div>
37
 </div>
38
</div>