Dalam tutorial kali ini saya akan menjelaskan bagaimana cara membuat menu jQuery smoth dropdown , sebenarnya menu dropdown kali ini ada dua jenis yang saya postingkan kali ini jenis yang pertama kalian bisa melihat contohnya di blog jayatkj klik disini untuk melihat contohnya
bagaimana menarik untuk mencoba , berikut langkah langkahnya
* Login ke blogger
* Masuk kerancangan dan pilih Edit HTML
* Tekan F3 dan cari kode <head> letakan kode jQuery dan CSS dibawah ini diatas kode <head> atau sebelum kode <head>
<link href='https://sites.google.com/site/jayanaktkj/smoth-jquery/superfish.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/jayanaktkj/smoth-jquery/theme2.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/jayanaktkj/smoth-jquery/jquery-1.3.2.min.cs.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayanaktkj/smoth-jquery/superfish.js' type='text/javascript'/>
<script type='text/javascript'>
jQueryCS(function() {
jQueryCS("ul.cs-superfish").superfish();
});
</script>
* Dan langkah terakhir letakan kode dibawah ini diatas kode <body> kalian juga bisa menambahkan kode dibawah ini di tambah gadget HTML yaitu di rancangan
<ul class='cs-superfish sf-menu'>
<li class='current first'>
<a href='http://shofitkj.blogspot.com'>menu item</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='#'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='#'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='#'>inner item</a></li>
</ul>
</li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li>
<a href='#'>menu</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li>
<a href='#'>menu item asd sdf s</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li class='last'><a href='http://alamat-url'>menu item</a></li>
</ul>
* Ganti http://alamat-url dengan alamat url kalian masing masing terakhir simpan dan lihat hasilnya
0 komentar:
Posting Komentar