Hallo sobat utta semua akhirnya saya bisa posting lagi, Ok lah langsung saja ke topik.Mungkin untuk sekian kalinya BLOGUT2A-4DOWN.NET membagi ilmu cara membuat Menu Navigasi,kali ini pun saya akan share Cara Membuat Menu Navigasi Kwicks Dengan jQuery,jika sobat belum tau yang namanya menu navigasi kwicks silahkan lihat contoh berikut.
- Home
- Blog
- About
- Portfolio
- Contact
- Resource
Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates
Lalu taruh kode berikut di atas ]]></b:skin>
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block;
}
Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya
<script src=https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js type=text/javascript/>
<script src=https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js type=text/javascript/>
<script src=https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js type=text/javascript/>
Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :
<div class=kwickswrap>
<ul class=kwicks>
<li id=kwick1><a href=# title=halaman utama>Home</a></li>
<li id=kwick2><a href=# title=daftar isi.>Blog</a></li>
<li id=kwick3><a href=# title=about>About</a></li>
<li id=kwick4><a href=# title=futures>Portfolio</a></li>
<li id=kwick5><a href=# title=contact us>Contact</a></li>
<li id=kwick6><a href=http://pelajaran-blog.blogspot.com/ title=recomended links>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$(.kwicks).kwicks({
max : 190,
duration: 800,
easing: easeOutQuint
});
});
</script>
Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
0 komentar:
Posting Komentar