Jquery And CSS3 Menu Bar

Jquery And CSS3 Menu Bar - Postingan kali ini masih seputar tutorial dalam membuat sebuah menu blog untuk blogger . Pada beberapa waktu yang lalu [OBC] share tentang menu Cool CSS3 Navigation Menu dengan CSS3 . Kali ini menu yang dishare Jquery And CSS3 Menu Bar yang masih menggunakan CSS3 tapi ada penambahan kode Jquery didalamnya . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini . 

See Demo   

Untuk mempermudah dalam pemasangannya brada gabungkan ketiga kompenen menunya sehingga menjadi seperti ini 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
  $(function() {
    //We initially hide the all dropdown menus
    $('#dropdown_nav li').find('.sub_nav').hide();

    //When hovering over the main nav link we find the dropdown menu to the corresponding link.
    $('#dropdown_nav li').hover(function() {
      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
      $(this).find('.sub_nav').fadeIn(100);
    }
                                , function() {
                                  //Do the same again, only fadeOut this time.
                                  $(this).find('.sub_nav').fadeOut(50);
                                }
                               );
  }
   );
</script>
<style>
  #dropdown_nav a {
 font-family:Arial, Sans-Serif;
        font-size:15px;
        font-weight:bold;
        color:#525252;
        text-decoration:none;
      }
      #dropdown_nav {
        width:960px;
        padding:0px;
        display:inline-block;
        list-style:none;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border:1px solid #ccc;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background:#e2e2e2;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
 
      #dropdown_nav li {
  padding:10px 0px 10px 0px;
  float:left;
  position:relative;
  display:inline-block;
      }
 
      #dropdown_nav li a {
        padding:10px 15px 10px 15px;
        text-shadow:-1px 1px 0px #f6f6f6;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border-right:1px solid #ccc;
      }
      #dropdown_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
 
      #dropdown_nav li a.first {
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
      }
      /*#dropdown_nav li a.last {
      -moz-border-radius:0px 5px 5px 0px;
      -webkit-border-radius:0px 5px 5px 0px;
    }
      */
 
      /* Sub-Nav styling */
      #dropdown_nav .sub_nav {
        width:160px;
        padding:0px;
        position:absolute;
        top:38px;
        left:0px;
        border:1px solid #ccc;
        background:#e2e2e2;
      }
 
      #dropdown_nav .sub_nav li {
        width:160px;
        padding:0px;
      }
 
      #dropdown_nav .sub_nav li a {
        display:block;
        border-bottom:1px solid #ccc;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
      #dropdown_nav .sub_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav .sub_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
  <li><a class="first" href="http://duniaradioku.blogspot.com/">Home</a></li>
  <li><a href="#">Categories</a>
   <ul class="sub_nav">
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
   </ul>
  </li>
  <li><a href="#">Exchange</a>
   <ul class="sub_nav">
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
  </li>
  <li><a class="last" href="#">Other Stuff</a>
   <ul class="sub_nav">
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff</a></li>
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff </a></li>
   </ul>
  </li>
 </ul>

• Klik Tataletak 
• Add Gadget / HTML Javascript 
• Masukan kode diatas 
• Save dan lihat hasilnya  

Kalau pada template brada sudah terpasang kode Jquery hilangkan kode dibawah ini . 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>

"#" Ganti dengan link sobat

Good Luck ...!!!
Source : Bloggeryard