Membuat Menu Navigasi menggunakan J-Query

 

Klik sini untuk demo

• ·         Log in Ke blogger anda
• ·         Masuk ke rancangan lalu edit html
• ·         Centang Expand Template Widget
• ·         Lalu cari kode ]]></b:skin>
• ·         Kemudian copy kode ini diatas kode ]]></b:skin>

/*---------------- Magic line navigation --------------------------*/ .nav-wrapline{     background:-moz-linear-gradient(top, #051547, #888, #051547); -moz-box-shadow:0px 2px 2px #111;     width: 500px;     border: solid 1px #FFF;     height: 30px;     -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .group:after {      visibility: hidden;      display: block;      font-size: 0;      content: " ";      clear: both; height: 0;       margin: 50px auto;      background-color: rgba(0,0,0,0.6);      border-top: 2px solid #FFF;      border-bottom: 2px solid #FFF;      width: 500px;      } *:first-child+html .group {      zoom: 1;      } /* IE7 */ #magic-line {      position: absolute; bottom: -2px; left: 0;      width: 100px; height: 2px;      background: #fe4902;      } #magic {      margin: 0 auto;      list-style: none;      position: relative;      width: 500px;      } #magic li {      display: inline;      } #magic li a {      position: relative; z-index: 200;      color: #bbb; font-size: 14px;      display: block; float: left;      padding: 6px 10px 4px 10px;      text-decoration: none;      text-transform: uppercase;      } #magic li a:hover {      color: white;      } #magic #magic-line-two {      position: absolute; top: 0;      left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;      -moz-border-radius: 5px;      -webkit-border-radius: 5px;     border-left: solid 1px #fff;     border-right: solid 1px #fff; } .current_page_item a, .current_page_item_two a {      color: white !important;      }

Dan simpan kode ini diatas kode  </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>     <script src="http://kangdadang.googlecode.com/files/jcolor.js"></script>  <script type="text/javascript">     $(function(){     var $el, leftPos, newWidth,         $mainNav2 = $("#magic");     $mainNav2.append("<li id='magic-line-two'></li>");        var $magicLineTwo = $("#magic-line-two");        $magicLineTwo         .width($(".current_page_item_two").width())         .height($mainNav2.height())         .css("left", $(".current_page_item_two a").position().left)         .data("origLeft", $(".current_page_item_two a").position().left)         .data("origWidth", $magicLineTwo.width())         .data("origColor", $(".current_page_item_two a").attr("rel"));                    $("#magic li").find("a").hover(function() {         $el = $(this);         leftPos = $el.position().left;         newWidth = $el.parent().width();         $magicLineTwo.stop().animate({             left: leftPos,             width: newWidth,             backgroundColor: $el.attr("rel")         })     }, function() {         $magicLineTwo.stop().animate({             left: $magicLineTwo.data("origLeft"),             width: $magicLineTwo.data("origWidth"),             backgroundColor: $magicLineTwo.data("origColor")         });       }); }); </script>

Terakhir cara pemanggilannya pada HTML (sesuai keinginan dan template teman-teman sekalian.

<div class="nav-wrapline">                <ul class="group" id="magic">             <li style=""><a rel="#fe4902" href="#">Home</a></li>             <li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>             <li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>             <li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>             <li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li> </ul>       </div>

Terima kasih, semoga teman-teman sekalian berhasil dan jangan lupa tinggalkan kritik dan saran anda.

Share it to your friends..!