Sunday, February 21, 2010

jQuery: Tab Navigasi Sliding Horizontal Smooth

Untuk demo silakan klik disini
Bingung ni mau ngasih judulnya apaan..?? ya udah deh "Tab Navigasi Sliding Horizontal Smooth jQuery" ajah, ya sesuai judulnya trik ini menggunakan JQuery. Langsung menuju TKP (ga usah basa-basi), kita langsung ajah praktekin ni triknya :
  1. Seperti biasa backup terlebih dahulu template anda.
  2. Cari kode ]]></b:skin>.
  3. Masukan kode dibwah ini diatasnya.
  4. .container { width: 610px; margin: 40px auto; text-align: left; } .tab-nav { width: 610px; overflow: hidden; background: #ddd url(http://s2.sigmirror.com/files/58348_nuylg/tab-slide.png) no-repeat 0 0; } .tab-nav ul { position: relative; float: left; width: 1600px; margin-left: 535px; padding-left: 0; list-style-type: none; background-color: #fff; } .tab-nav li { float: left; clear: left; } .tab-nav a { display: block; width: 74px; border-right: 1px solid #ddd; height: 25px; line-height: 24px; float: left; text-align: center; text-decoration: none; color: #000; background: url(tab-slide.png) no-repeat 2px -194px; } .tab-nav a.expanded { background-position: 2px -244px; } /* second level */ .tab-nav ul ul { float: left; background-color: #333; width: auto; margin-left: 0;} .tab-nav li li {clear: none;} .tab-nav li li a { color: #fff; width: 100px; background-image: none;}
  5. Setelah itu cari juga kode berikut ini </head> dan taru diatasnya.
  6. <script src="http://s2.sigmirror.com/files/58346_oasbi/jquery.js" type="text/javascript"></script> <script src="http://s2.sigmirror.com/files/58347_dsepy/tab-nav.js" type="text/javascript"></script>
  7. Lalu cari kode <body> dan taruh kode ini dibawahnya.
  8. <div class="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
  9. Save template anda, dan lihat hasilnya.
Jika anda ingin menggunakannya sebagai widget, untuk bagian <body> ga usah dimasukan. Memasangnya sebagai Widget.
  • Tambah Laman - HTML/Javascript, tinggal tambahkan kode dibawah ini.
  • <div id="container"> <h2>Demo 1: basic</h2> <div id="tab-nav-1" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 2: one at a time</h2> <div id="tab-nav-2" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> <h2>Demo 3: auto-close</h2> <div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#">one</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> <li> <a href="#">two</a> <ul> <li><a href="#">b sub one</a></li> <li><a href="#">b sub two</a></li> <li><a href="#">b sub three</a></li> <li><a href="#">b sub four</a></li> <li><a href="#">b sub five</a></li> </ul> </li> <li> <a href="#">three</a> <ul> <li><a href="#">sub one</a></li> <li><a href="#">sub two</a></li> <li><a href="#">sub three</a></li> </ul> </li> </ul> </div> </div>
  • Simpan, dan lihat hasilnya.
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.