Penyusunan dokumen perencanaan tahunan Desa atau sering disebut dengan
Dokumen RKP Desa. Pada postingan ini akan dibagikan terkait dengan dokumen
RKP Desa ...
Membuat Tab Menu Dengan jQuery
Tab menu dalam dunia blogger tidaklah asing. Bisa anda lihat di setiap template hampir 90% pengguna blogger memsang widget blogger dengan tab menu. Seperti yang dituliskan pada artikel sebelumnya. Mungkin Anda berminat untuk memasang pada sidebar blog Anda.
Fitur ini dilengkapi sengan animasi yang menarik untuk dilihat, buktikan...!!!
Pemasangannya
#itptabmenu-wrap {
width:440px;
margin:80px auto;
}
h1 {
font:bold 40px Sans-Serif;
margin:0 0 20px 0;
}
.hide {
position:absolute;
top:-9999px;
left:-9999px;
}
#itptabmenu {
background:#eee;
padding:10px;
margin:0 0 20px 0;
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
}
#itptabmenu .nav {
overflow:hidden;
margin:0 0 10px 0;
}
#itptabmenu .nav li {
width:97px;
float:left;
margin:0 10px 0 0;
}
#itptabmenu .nav li.last {
margin-right:0;
}
#itptabmenu .nav li a {
display:block;
padding:5px;
background:#959290;
color:white;
font-size:10px;
text-align:center;
border:0;
}
#itptabmenu .nav li a:hover {
background-color:#111;
}
#itptabmenu ul {
list-style:none;
}
#itptabmenu ul li a {
display:block;
border-bottom:1px solid #666;
padding:4px;
color:#666;
}
#itptabmenu ul li a:hover {
background:#fe4902;
color:white;
}
#itptabmenu ul li:last-child a {
border:none;
}
#itptabmenu ul li.itptabmenu-one a.current,
#itptabmenu ul.featured li a:hover {
background-color:#0575f4;
color:white;
}
#itptabmenu ul li.itptabmenu-two a.current,
#itptabmenu ul.core li a:hover {
background-color:#d30000;
color:white;
}
#itptabmenu ul li.itptabmenu-three a.current,
#itptabmenu ul.jquerytuts li a:hover {
background-color:#8d01b0;
color:white;
}
#itptabmenu ul li.nav-four a.current,
#itptabmenu ul.classics li a:hover {
background-color:#FE4902;
color:white;
}<div id="itptabmenu-wrap">
<div id="itptabmenu">
<ul class="nav">
<li class="itptabmenu-one"><a href="#featured" class="current">CSS 3</a></li>
<li class="itptabmenu-two"><a href="#core">Label</a></li>
<li class="itptabmenu-three"><a href="#jquerytuts">jQuery</a></li>
<li class="nav-four last"><a href="#classics">Classics</a></li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
<li><a href="#">Tab Menu jQuery 1</a></li>
</ul>
<ul id="core" class="hide">
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
<li><a href="#">Tab Menu jQuery 2</a></li>
</ul>
<ul id="jquerytuts" class="hide">
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
<li><a href="#">Tab Menu jQuery 3</a></li>
</ul>
<ul id="classics" class="hide">
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
<li><a href="#">Tab Menu jQuery 4</a></li>
</ul>
</div>
</div>
</div><script type='text/javascript'>
//<![CDATA[
(function($) {
$.organicTabs = function(el, options) {
var base = this;
base.$el = $(el);
base.$nav = base.$el.find(".nav");
base.init = function() {
base.options = $.extend({},$.organicTabs.defaultOptions, options);
// Accessible hiding fix
$(".hide").css({
"position": "relative",
"top": 0,
"left": 0,
"display": "none"
});
base.$nav.on("click", "li > a", function() {
// Figure out current list via CSS class
var curList = base.$el.find("a.current").attr("href").substring(1),
// List moving to
$newList = $(this),
// Figure out ID of new list
listID = $newList.attr("href").substring(1),
// Set outer wrapper height to (static) height of current inner list
$allListWrap = base.$el.find(".list-wrap"),
curListHeight = $allListWrap.height();
$allListWrap.height(curListHeight);
if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
// Fade out current list
base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
// Fade in new list on callback
base.$el.find("#"+listID).fadeIn(base.options.speed);
// Adjust outer wrapper to fit new list snuggly
var newHeight = base.$el.find("#"+listID).height();
$allListWrap.animate({
height: newHeight
});
// Remove highlighting - Add to just-clicked tab
base.$el.find(".nav li a").removeClass("current");
$newList.addClass("current");
});
}
// Don't behave like a regular link
// Stop propegation and bubbling
return false;
});
};
base.init();
};
$.organicTabs.defaultOptions = {
"speed": 300
};
$.fn.organicTabs = function(options) {
return this.each(function() {
(new $.organicTabs(this, options));
});
};
})(jQuery);
//]]>
</script>
<script>
$(function() {
$("#itptabmenu").organicTabs();
});
</script>Hasilnya
Semoga bermanfaat.
2 comments