Menu với hiệu ứng Jquery "mượt mà"

 Chắc hẳn các bạn đã ít nhiều biết đến Jquery, một thư viện mã nguồn mở cho Webdeveloper? Trong bài viết này, Karl sẽ giới thiệu cho các bạn một thanh Menu được tạo ra dựa trên thư viện Jquery và kết hợp với CSS3. Hy vọng các bạn sẽ thích.

 DEMO

Nào, ta cùng bắt đầu thủ thuật.

• Vào Mẫu >> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function () {

    var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; 
    var dwidth = $('.lavalamp li.active').width() + "px";
    $('.floatr').css({
        "left": dleft+"px",
        "width": dwidth
    });
    $('li').hover(function(){
        var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate
        });
    },
    function(){
        var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
        var width = $(this).siblings('li.active').width() + "px";
        var sictranslate = "translate("+left+"px, 0px)";
        $(this).parent('ul').next('div.floatr').css({
            "width": width,
            "-webkit-transform": sictranslate,
            "-moz-transform": sictranslate  
        });
    }).click(function(){
        
        $(this).siblings('li').removeClass('active');

        $(this).addClass('active');

        return false; 
    });
});

•  Tiếp tục chèn đoạn code sau vào trước thẻ  ]]></b:skin>

.menuceewave {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}
.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
}
.dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
.menuceewave a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
.menuceewave ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.menuceewave ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.menuceewave ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

•  Lưu Mẫu lại.
• Vào Bố cục, thêm một HTML/JAVASCRIPT và chèn đoạn code sau vào:

<div class="menuceewave dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

• Nhấn Lưu và tận hưởng thành quả.

Menu mình giới thiệu sử dụng CSS để trang trí. Các bạn có thể chỉnh sửa cho nó đẹp hơn.

 Về phần khai báo Jquery thì các bạn nên xóa nếu dã có rồi.