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.


Responses

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

DxH said...

Chào Karl!
Rất vui khi ghé qua blog của bạn.
Là người mới tham gia cộng đồng blog Việt mong bạn cùng bạn giao lưu học hỏi nhé.
dxhbook.blogspot.com


January 23, 2013 at 8:00 AM
Karl Carsten said...

Blog bác đẹp mà còn load nhanh nữa :))


January 23, 2013 at 7:11 PM

Post a Comment

FRIENDS

VanLinhEx Blog Duy Pham Blog BKAV giá rẻ Namkna Blog Đinh Công Thành ChinhTruc Blog VnZap! VnBlogExpress LaoDongBlog Thienhieu Vận chuyển nhà LuatIT Blog Kiếm tiền trên mạng Thế giới APKKiếm Tiền Trên Mạng GiangLe - Chia set phần mềm
Return to top of page Copyright © 2011 | Platinum Theme