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.

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-12<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>

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-5354code-line:2-5455code-line:2-5556code-line:2-5657code-line:2-5758code-line:2-5859code-line:2-5960code-line:2-6061code-line:2-6162code-line:2-6263code-line:2-6364code-line:2-6465code-line:2-6566code-line:2-66.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;
}

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-1920code-line:3-2021code-line:3-2122code-line:3-2223code-line:3-2324code-line:3-2425code-line:3-2526code-line:3-2627code-line:3-2728code-line:3-2829code-line:3-2930code-line:3-3031code-line:3-3132code-line:3-3233code-line:3-3334code-line:3-3435code-line:3-3536code-line:3-3637code-line:3-3738code-line:3-3839code-line:3-3940code-line:3-4041code-line:3-4142code-line:3-4243code-line:3-4344code-line:3-4445code-line:3-4546code-line:3-4647code-line:3-4748code-line:3-4849code-line:3-49<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