Mã HTML

<div class="lavalamp" >
  <ul>
    <li class="active"><a href="">Trang chủ</a></li>
    <li><a href="">Bài viết</a></li>
    <li><a href="">Tổng hợp</a></li>
    <li><a href="">Hướng dẫn</a></li>
    <li><a href="">Miễn phí</a></li>
    <li><a href="">Liên hệ</a></li>
  </ul>
  <div class="floatr"></div>
</div>

Như bạn thấy, mã HTML sử dụng cho menu vẫn là dạng ul li quen thuộc. Ở đây, <div class="floatr"></div> chính là phần tử sẽ chuyển động khi di chuột

Mã CSS

Đầu tiên là mã CSS cho menu, bạn cũng sẽ thấy nó rất quen thuộc nếu đã quen làm CSS. Nếu bạn là người mới thì cũng không có gì phải lo lắng, nó cũng đơn giản mà.

ul {
  margin: 0;
  padding: 0;
  z-index: 300;
  position: absolute;
}

ul li {
  list-style: none;
  float:left;
  text-align: center;
}

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

Đoạn mã sử dụng cho div.lavalamp sử dụng một số thuộc tính của CSS3 như border radius, box shadow và gradient

.lavalamp {
    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-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
}

Cuối cùng là mã CSS cho phần tử sẽ chuyển động khi bạn di chuột vào menu. Sử dụng thuộc tính transition để tạo chuyển động giữa các vị trí của .floatr

.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;
}

Mã javascript

Vai trò của javascript trong bài viết này sẽ là: lấy vị trí hiện tại của phần tử đang được kích hoạt (active) và vị trí của chuột khi hover qua menu sau đó áp dụng chuyển động vào .floatr.

Chính xác hơn là chúng ta sẽ áp dụng thuộc tính transform vào phần tử .floatr. Bạn có thể xem thêm về css3 transform tại w3

$(document).ready(function () {

		// Lấy vị trí hiện tại của phần tử đang được kích hoạt
    var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
    var dwidth = $('.lavalamp li.active').width() + "px";

    // Áp dụng vị trí trên vào phần tử floatr
    $('.floatr').css({
        "left": dleft+"px",
        "width": dwidth
    });

		// Thực hiện chuyển động khi di chuột
    $('.lavalamp 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;
    });
});

Đến đây coi như bạn đã hoàn thành fancy menu của mình. Trang demo sử dụng thêm một số màu sắc cho các loại menu khác nhau nhờ có đoạn CSS sau:

.magenta {
	background : rgb(190,64,120);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
	background : -moz-linear-gradient(top,rgb(190,64,120), rgb(177,24,91));
	border: 1px solid #841144;
}

.cyan {
	background : rgb(64,181,197);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
	background : -moz-linear-gradient(top, rgb(64,181,197), rgb(7,165,187));
	border: 1px solid #2f8893;
}

.yellow {
	background : rgb(255,199,79);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
	background : -moz-linear-gradient(top, rgb(255,199,79), rgb(255,188,43));
	border: 1px solid #c08c1f;
}

.orange {
	background : rgb(255,133,64);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
	background : -moz-linear-gradient(top, rgb(255,133,64), rgb(255,107,24));
	border: 1px solid #c04f11;
}

.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-linear-gradient(top, rgb(89,89,89), rgb(54,54,54));
	border: 1px solid #272727;
}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}

Đây là bài dịch lại từ insicdesigns nếu bạn thấy dở có thể xem bài viết bằng tiếng anh