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

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

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.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Edit Article Google+ nối dài “cơn ác mộng” mạng xã hội của Google?

Google+ nối dài “cơn ác mộng” mạng xã hội của Google?

Nhiều nhà phân tích của giới truyền thông và công nghệ Mỹ cho rằng Google+ lại tiếp tục là một sự thất bại trên lĩnh vực mạng xã hội của Google.

6 Drupal SEO Modules Required for Superior Search Ranking Performance

6 Drupal SEO Modules cần thiết cho hiệu suất xếp hạng website

If you are running your site with Drupal, you are reaping the numerous benefits this publishing platform has to offer.

Chrome lần đầu 'ngang hàng' với Firefox

Chrome lần đầu 'ngang hàng' với Firefox

Trình duyệt mới xuất hiện 2 năm của Google lần đầu tiên đuổi kịp Firefox và dự kiến với đà tăng trưởng này, nó sẽ trở thành á quân trong tháng 11.

Công ty diệt chuột T&C

 

Diet con trung