Menu Tab dengan jQuery

Menu Tab dengan jQuery

HTML Javascript jQuery Navigasi sitemap Widget

Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya.

Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan sendiri dengan ukuran widtget isi atau elemen dari menu yang anda buat ini.

Copy dan letakkan kode berikut di atas kode ]]></b:skin> atau </style>

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-83ul.tabs {
  width: 300px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 100px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #369;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " ";
  display: table; 
}
.group:after { clear: both; }
#panels {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 16px;
  font-size: 12px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }

Letakkan kode HTML di bawah ini di sidebar atau elemen lain yang anda inginkan.

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-10<ul class="tabs group">
  <li><a class="active" href="#/one">Tab 1</a></li>
  <li><a href="#/two">Tab 2</a></li>
  <li><a href="#/three">Tab 3</a></li>
</ul>
<div id="panels">
  <p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit aliquam mauris, a mattis lectus varius id. Ut dolor tortor, hendrerit et porttitor in, gravida sed felis. Donec vehicula ex nec venenatis pulvinar. Donec vel sodales neque.</p>
  <p id="two">Donec tincidunt tortor ut magna mollis sagittis. Mauris eu nibh non purus gravida hendrerit. Donec enim nisi, pretium eu libero sit amet, bibendum sagittis velit. Pellentesque non dapibus leo. Suspendisse ante tellus, volutpat ac leo eget, venenatis rhoncus sem.</p>
  <p id="three"> Aenean dapibus eleifend venenatis. Integer et suscipit dui. Nam tellus diam, mattis in ultrices et, feugiat ac libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>

Letakkan jQuery berikut di atas kode </head> atau </body> namun saya recomendasikan di atas kode yang terakhir.

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-14<script type='text/javascript'>
//<![CDATA[ 
(function($) {
    var tabs =  $(".tabs li a");
    tabs.click(function() {
 var panels = this.hash.replace('/','');
 tabs.removeClass("active");
 $(this).addClass("active");
    $("#panels").find('p').hide();
    $(panels).fadeIn(200);
 });
})(jQuery);
//]]>
</script>



Jika anda ingin tampilan menu tab dengan warna yang berbeda dan lebih lebar anda bisa menggunakan css di bawah ini.

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-67code-line:4-78code-line:4-89code-line:4-910code-line:4-1011code-line:4-1112code-line:4-1213code-line:4-1314code-line:4-1415code-line:4-1516code-line:4-1617code-line:4-1718code-line:4-1819code-line:4-1920code-line:4-2021code-line:4-2122code-line:4-2223code-line:4-2324code-line:4-2425code-line:4-2526code-line:4-2627code-line:4-2728code-line:4-2829code-line:4-2930code-line:4-3031code-line:4-3132code-line:4-3233code-line:4-3334code-line:4-3435code-line:4-3536code-line:4-3637code-line:4-3738code-line:4-3839code-line:4-3940code-line:4-4041code-line:4-4142code-line:4-4243code-line:4-4344code-line:4-4445code-line:4-4546code-line:4-4647code-line:4-4748code-line:4-4849code-line:4-4950code-line:4-5051code-line:4-5152code-line:4-5253code-line:4-5354code-line:4-5455code-line:4-5556code-line:4-5657code-line:4-5758code-line:4-5859code-line:4-5960code-line:4-6061code-line:4-6162code-line:4-6263code-line:4-6364code-line:4-6465code-line:4-6566code-line:4-6667code-line:4-6768code-line:4-6869code-line:4-6970code-line:4-7071code-line:4-7172code-line:4-7273code-line:4-7374code-line:4-7475code-line:4-7576code-line:4-7677code-line:4-7778code-line:4-7879code-line:4-7980code-line:4-8081code-line:4-8182code-line:4-8283code-line:4-8384code-line:4-8485code-line:4-8586code-line:4-8687code-line:4-8788code-line:4-8889code-line:4-8990code-line:4-9091code-line:4-9192code-line:4-9293code-line:4-9394code-line:4-9495code-line:4-95ul.tabs {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 200px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #1abc9c;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " "; 
  display: table;
}
.group:after { clear: both; }
#panels {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }




pastikan di template anda sudah ada jQuery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> agar menu tab ini bisa berjalan atau berfungsi.

Artikel Terkait

  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • jQuery Show Hide Checkboxes
    Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQu…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…
  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …

12 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...