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..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

1 komentar:

  1. wawan said...:

    Penipu ..
    Blog Cacad !!!!!!!!!!!

Post a Comment

 
Ridho Technology © 2012 | Template by Ridho Technology