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 :
- Seperti biasa backup terlebih dahulu template anda.
- Cari kode ]]></b:skin>.
- Masukan kode dibwah ini diatasnya.
- Setelah itu cari juga kode berikut ini </head> dan taru diatasnya.
- Lalu cari kode <body> dan taruh kode ini dibawahnya.
- Save template anda, dan lihat hasilnya.
.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;}
<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>
<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>
- Tambah Laman - HTML/Javascript, tinggal tambahkan kode dibawah ini.
- Simpan, dan lihat hasilnya.
<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>
0 komentar:
Post a Comment
saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.