Membuat MagicLine Navigation Menu Dengan jQuery

Sunday, August 30, 2015

Lagi-lagi pada bahasan masih seputar modifikasi navigasi menu pada blog. Beberapa contoh akan di paparkan pada artikel kali ini. Efek hover yang mengesankan akan membuat pengunjung akan terpanah untuk melihatnya.

Pada tulisan beberapa hari lalu udah dijelaskan pula tentang menu-menu yang bisa Anda terapkan dalam blog, silakan lihat disini.

<div class="itpmenu-wrap">
 <ul class="group" id="itpmenu-one">
  <li class="current_page_item"><a href="#">Home</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Posting</a></li>
  <li><a href="#">Template</a></li>
  <li><a href="#">Widget</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">HTML 5</a></li>
  <li><a href="#">SEO</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-one {
  margin:0 auto;
  list-style:none;
  position:relative;
  width:960px;
}

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

#itpmenu-one a {
  color:#bbb;
  font-size:14px;
  float:left;
  padding:6px 10px 4px 10px;
  text-decoration:none;
  text-transform:uppercase;
}

#itpmenu-one a:hover {
  color:white;
}

#magic-line {
  position:absolute;
  bottom:-2px;
  left:0;
  width:100px;
  height:2px;
  background:#fe4902;
}

.current_page_item a {
  color:white !important;
}

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

.ie6 #magic-line {
  bottom:-3px;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='http://cekidot.96.lt/file/js/magicLine-navigation.js'></script>
<script type='text/javascript'>
//<![CDATA[
// DOM Ready
$(function() {
    var $el, leftPos, newWidth;
    $("#itpmenu-one").append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#itpmenu-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
    $(".current_page_item_two a").mouseenter();
});
//]]>
</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