Khanh Hoang - Kenn
Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.
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ạ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.
<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.
#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.
$(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.