Hiệu ứng magic line cho navigation với jQuery

Bài viết sẽ giới thiệu về một hiệu ứng đơn giản khi hover chuột lên navigation  với jQuery, đoạn mã chương trình được giới thiệu sau ý tưởng thực hiện thuộc về tác giả Chris Coyier trên CSS-tricks.com.

Ý tưởng

Tạo ra phần tử di chuyển chèn vào phía dưới thanh navigation, xác định CSS cho phần tử với thuộc tính position absolute so với relative của navigation, khi xảy ra hành động hover chúng ta sẽ sử dụng phương thức animation trong jQuery để di chuyển phần tử theo vị trí của phần tử hover.

HTML code

<ul id="navigation">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
</ul>

Trong đoạn mã trên chúng ta xác định phần tử mặc định ban đầu được chọn sẽ chứa class là current.

CSS code

#navigation {
   margin: 0 auto;
   position: relative;
   width: 960px;
   height: 40px;
   list-style: none;
   background-color: #2d2d2d;
   border-top: 2px solid white;
   border-bottom: 2px solid white;
}
#navigation li { display: inline; }
#navigation li a {
   color: #bbb;
   font-size: 14px;
   display: block;
   float: left;
   line-height: 40px;
   padding: 0 10px;
   text-decoration: none;
   text-transform: uppercase;
}
#navigation li a:hover { color: white; }
li.current a{ color: white !important; }
#magic-line {
   position: absolute;
   bottom: -2px; left: 0;
   width: 100px; height: 2px;
   background: #fe4902;
}

Trong đoạn mã css trên chúng ta cần chú ý đặt navigation ở thuộc tính position là relative và margic-line ở thuộc tính position absolute đồng thời xác định kích thước vị trí ban đầu cho phần tử margic-line.

JavaScript code

$(function(){
  // them phan tu #magic-line vao cuoi #navigation
       $("#navigation").append("<li id='magic-line'></li>");

    var $magicLine = $("#magic-line");

    $magicLine
  // chiều rộng magicline bằng chiều rộng phần tử .current
        .width($("#navigation .current").width())
  // thuộc tính left của margicline bằng vị trí left của phần tử .current a
        .css("left", $("#navigation .current a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#navigation li").find("a").hover(
  function(){
   // lấy vị trí và chiều rộng của phần tử được hover
   var leftPos = $(this).position().left;
   var newWidth = $(this).parent().width();

   // animate tới phần tử được hover
   $magicLine.stop().animate({
    left: leftPos,
    width: newWidth
   });
  },
  function(){
   $magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
   });   
  }
); // end hover   
}); // end ready

Trong đoạn mã trên ban đầu chúng ta tạo ra phần tử với id là magic-line và chèn nó vào vị trí cuối cùng của navigation, sau đó xác định vị trí ban đầu theo phần tử có class là current, tiếp theo chúng ta có sử dụng phương thức data để lưu thông tin về vị trí left và width theo phần tử current để  sau khi phần tử magic-line được di chuyển nó sẽ trở về vị trí theo phần tử current.

Đọc bài viết gốc  từ tác giả Chris Coyier tại địa chỉ css-tricks.com.