Magic Line Navigation Menu

Home » Tips Blogger » Magic Line Navigation Menu

Magic Line Navigation Menu

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/*----------------
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;
   }

8. Simpan kode ini diatas </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>

9. Terakhir cara ppenempatannya pada HTML (tempatkan ssuai keinginan dan template anda):

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