Dalam tutorial sebelumnya yaitu membuat menu jQuery smoth dropdown kali ini saya akan mempostingkan bagaimana cara membuat menu jQuery smoth dropdown navbar contohnya bisa kalian lihat diblog saya yaitu jaya tkj klik disini
oke langsung saja cara pembuatannya sebagai berikut:
* 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 rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish.css" type="text/css" />
<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish-navbar.css" type="text/css" />
<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/theme2.css" type="text/css" />
<script src="https://sites.google.com/site/jayanaktkj/smoth-jquery2/jquery-1.3.2.min.cs.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish.js" type="text/javascript"></script>
<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 sf-navbar">
<li class="current first">
<a href="http://shofisanjaya.blogspot.com">menu item</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>
<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="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="#" title="Menu title without inner level.">menu item</a></li>
</ul>* Ganti http://alamat-url dengan alamat url kalian masing masing terakhir simpan dan lihat hasilnya
0 komentar:
Posting Komentar