[Bài 3 jquery]: Tạo menu trượt bằng jquery

Ở bài trước chúng ta đã tìm hiểu việc tạo một tabs đơn giản bằng jquery. Ở bài hôm nay chúng ta sẽ tiếp tục series bài tập jquery với việc tạo menu trượt bằng jquery. Menu có lẽ là tính năng mà website nào cũng có vì vậy việc tìm hiểu cách tạo một menu bằng jquery sẽ cần thiết cho chúng ta sau này.

Yêu cầu:

Tạo một menu có tính năng trượt menu con khi hover menu cha bằng hiệu ứng trong jquery.

Phân tích:

Chúng ta cần xác định được khi nào thì xuất hiện menu con, dùng cách gì để ẩn hiện menu con khi đưa chuột sang menu cha khác, và dùng hiệu ứng gì để tạo menu trượt?

Code:

HTML:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Services</a>
        <ul class="child">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Logo and Print Design</a></li>
            <li><a href="#">Batagor Enak Neh</a>
                
                <ul class="childchild">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Logo and Print Design</a></li>
                <li><a href="#">Batagor Enak Neh</a></li>
                <li><a href="#">Ngerujak juga</a></li>
                </ul>
            
            </li>
            <li><a href="#">Ngerujak juga</a></li>
        </ul>
    </li>
    <li><a href="#">Portofolio</a></li>
    <li><a href="#">Pengen ke Arab</a></li>
    <li><a href="#">Beasiswa S2 Go!! Goo!!</a>
        <ul>
            <li><a href="#">Lokal</a></li>
            <li><a href="#">International</a></li>
        </ul>
    </li>
    <li><a href="#">Hire me</a></li>
</ul>

CSS:

#nav li {
    float: left;
    position: relative;
    
}
#nav li a {
    background: #09749c;
    color: #fff;
    display:block;
    padding: 5px 5px;
    text-decoration: none;
    font-family: arial, helvetica, verdana, tahoma;
    font-size: 11px;     
 }
#nav li a:hover {
    background: #ff9c00;
    text-decoration:none;
}
#nav {
    height: 30px;
    display: block;
    padding: 10px 0;
    width: 900px;
   position: absolute;
}
#nav li ul {
    background: #e1ddd3;
    display: none;
    width: 150px;   
    position: absolute;
}
.shadow {
    -moz-box-shadow: 0px 3px 7px 3px #a8a8a8;
    -webkit-box-shadow: 0px 3px 7px 3px #a8a8a8;
    -o-box-shadow: 0px 3px 7px 3px #a8a8a8;
    box-shadow: 0px 3px 7px 3px #a8a8a8;
}
#nav li ul li {
    width: 100% 
}
#nav li ul > li:first-child {
    border-top: 3px solid #ff9c00;
}
#nav li.current > a {
    background: #ff9c00;
}
#nav li ul li ul{
    right: -150px; top: 0;
}

Jquery:

<script>
$('#nav ul.child').removeClass('child');
$('#nav ul.childchild').removeClass('childchild');
$('#nav li').has('ul').hover(function() {
   $(this).addClass('current').children('ul').addClass('shadow').slideDown(200)
   },
   function() {
      $(this).removeClass('current').children('ul').stop(true, true).slideUp('200')
  }
);
</script>

Demo

Giải thích:

removeClass(): gỡ bỏ class khỏi phần tử được chọn.

addClass(): thêm class vào phần tử được chọn.

hover(): sự kiên khi để chuột lên menu.

children(): tìm các phần tử con.

slideDown(), slideUp(): hiệu ứng trượt xuống, trượt lên.

Kết luận:

Rất đơn giản chúng ta đã tạo menu trượt bằng jquey một cách nhanh chóng. Tuy chỉ là bài tập nhưng các bạn có thể phát triển thêm để tạo menu dùng sau này cho các website khác.

Từ khóa tìm kiếm:

• bai tap lam menu bang jquery
• tạo menu xoay bằng jQuery
• tao menu truot bang wap