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

  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Efek Toggle Slide dengan jQuery
    Bagaimana cara membuat Efek toggle pada blog ini, seperti pada sidebar, Kode Konverter, dan Emoticon. Disini saya tidak akan menjelaskan pada penggunaan di blog saya, melainkan akan mencoba menjelaskan cara kerja efek toggle. Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini : <script src='…
  • Modifikasi Alert Emoticon
    Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Demo Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar t…
  • Nivo Slider, jquery slider dengan 9 efek transisi
    Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat. Demo Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besa…
  • Membuat tooltip sederhana menggunakan jQuery
    Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog. Untuk kali in…
  • Costume halaman error 404
    404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang tidak ada atau telah di hapus dari web/blog. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404" untuk di pasang pada blog sobat dengan sedikit custom dan tambahan jquery. Untuk…

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...