Kamis, 14 Juni 2012

Cara Membuat Menu Horizontal Sub Navigasi Dengan jQuery


By on 11.34

Blazer Blog, jQuery - Cara Membuat Menu Horizontal Sub Navigasi Dengan jQuery, kali ini saya akan membahas bagaimana cara membuat menu horizontal dengan sub menu, seperti yang biasa sub menu itu kebawah tapi kali ini lain sub menu nya berbentuk horizntal lagi, kaya gambar di bawah ini.


Cara Membuat 
1.Login ke Blog kamu.
2. Pilih Rancangan, pilih Add Gadget lalu HTML JavaScript dan copy kode di bawah ini.
<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 980px;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item$(this).find(&quot;span&quot;).show(); //Show the subnav} , function() { //on hover out...$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background$(this).find(&quot;span&quot;).hide(); //Hide the subnav});

});</script>
<ul id="topnav">

<li><a href="#">Home</a></li><li><a href="#">Blogger</a><span><a href="#">Widgets</a> |<a href="#">Tip And Tricks</a> |<a href="#">Basic</a></span></li><li><a href="#">Tutorials</a><span><a href="#">HTML</a> |<a href="#">Java Script</a> |<a href="#">CSS</a><a href="#">jQuery</a><a href="#">MooTools</a></span></li><li><a href="#">Templates</a><span><a href="#">1 Column</a> |<a href="#">2 Column</a> |<a href="#">3 Column</a> |<a href="#">4 Column</a> |<a href="#">Premium</a></span></li><li><a href="#">Subscribe</a></li><li><a href="#">Advertise</a></li><li><a href="#">Contact</a></li>

</ul>
 Simpan dan lihat hasilnya, dan juga ganti tanda # dengan URL yang dituju.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

9 komentar:

  1. ini bikin berat blog gak gan ?

    BalasHapus
  2. gan.. boleh minta gk tutorial kayak menu dropdown punyamu ?

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. gan klo nambah submenu lagi gimana dibawah submenu Widgets ???

    BalasHapus
  5. mas klo di paste lewat edit html template..diletakkan di mana

    BalasHapus
  6. terima kasih gan infonya manteb salam kenal http://idegemilang.blogspot.com/

    BalasHapus