MagicLine Navigation Menu (Part #1)

Saturday, November 10, 2012

MagicLine Navigation Menu (Part #1)

Artikel ini sama halnya dengan lanjutan dari tutorial sebelumnya. bisa anda lihat disini.

<div class="itpmenu-wrap">   
 <ul class="group" id="itpmenu-two">
  <li><a rel="#fe4902" href="#">ITP +]</a></li>
  <li><a rel="#A41322" href="#">IdTutorPlus</a></li>
  <li><a rel="#C6AA01" href="#">Gadget</a></li>
  <li class="current_page_item_two"><a rel="#900" href="#">Template</a></li>
  <li><a rel="#D40229" href="#">Videos</a></li>
  <li><a rel="#98CEAA" href="#">CSS</a></li>
  <li><a rel="#1B9B93" href="#">HTML 5</a></li>
  <li><a rel="#8DC91E" href="#">Tingkat Lanjut</a></li>
 </ul>
</div>

.itpmenu-wrap {
  margin:50px auto;
  background-color:rgba(0,0,0,0.6);
  border-top:2px solid white;
  border-bottom:2px solid white;
}

.group:after {
  visibility:hidden;
  display:block;
  content:"";
  clear:both;
  height:0;
}

*:first-child+html .group {
  zoom:1;
}

#itpmenu-two {
  margin:0 auto;
  list-style:none;
  position:relative;
  width:960px;
}

#itpmenu-two li {
  display:inline-block;
}

#itpmenu-two 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;
}

#itpmenu-two li a:hover {
  color:white;
}

#itpmenu-two #magic-line-two {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  background:#900;
  z-index:100;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

.current_page_item_two a {
  color:white !important;
}

.ie6 #itpmenu-two li,
.ie7 #itpmenu-two li {
  display:inline;
}

<script type='text/javascript'>
//<![CDATA[
// DOM Ready
$(function() {

    var $el, leftPos, newWidth;
        $mainNav2 = $("#itpmenu-two");
    
    /*
        itpmenu TWO
    */
    
    $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"));
                
    $("#itpmenu-two 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")
        });    
    });
    
    /* Kick IE into gear */
    $(".current_page_item_two a").mouseenter();
    
});
//]]>
</script>
<script src='https://cekidot.96.lt/file/js/magicLine-navigation.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

• Jika pada template blog Anda sudah terpasang jquery.min.js maka abaikan saja jquery/1.7.2/jquery.min.js diatas
• Disarankan Anda memakai jquery.min.js versi terbaru

Cobalah

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini