Fixed menu hiện đang là một xu hướng thiết kế của năm 2014.
Fixed menu là gì? Fixed menu là menu được gắn cố định ở một vị trí trên trang kể cả khi bạn cuộn trang lên xuống.
Giống như menu trên cùng của blog mình.

Nó khá tiện dụng khi visitor đọc xong bài viết và muốn chuyển sang chuyên mục nào đó mà không cần phải kéo trang lên.
Bài viết này sẽ hướng dẫn cách làm một fixed menu đơn giản và gọn nhẹ.

HTML

Bắt đầu với phần đơn giản nhất: HTML. Đặt đoạn mã này vào chỗ bất kì sau khi mở thẻ. Nếu bạn muốn dùng cho Wordpress, bạn hãy chèn vào file header.php

<div id="fixmenu">
    <a href="http://nhymxu.info"><img src=đường/dẫn/đến/file/logo.png" alt="" /></a>
    <ul class="menu-fixed">
        <li><a href="http://dungnt.net/blog/">Home</a></li>
        <li><a href="#header" id="scrolltotop">Top</a></li>
    </ul>
</div>

Bạn có thể thấy tôi đã tạo container #fixmenu để chứa toàn bộ menu: site logo và các liên kết. Sử dụng ul li để liệt kê các liên kết và có thể dễ dàng thêm các liên kết mới.

CSS

Bước thứ 2 là CSS. Nó làm nhiệm vụ dàn trải ul li sang hàng ngang và làm menu nhìn đẹp hơn. Đặt đoạn mã CSS này ở style.css hoặc file nào đó của bạn.

#fixmenu {
    width: 1122px;
    height:30px;
    margin-left:-48px;
    padding:5px 48px;
    position:fixed;
    top:0;
    background:#7eb7d9;
    display:none;
}

.menu-fixed {
    width: 260px;
    float: right;
    text-align: right;
    padding:4px 0 5px 0;
    list-style-type:none;
}

.menu-fixed li { display:inline; }

.menu-fixed a {
    ont-size:0.9em;
    color:#fff;
    text-shadow:1px 1px #5E8BC5;
    padding:0 0 0 10px;
}

Nếu bạn xem file html bây giờ, bạn sẽ không nhìn thấy gì cả. Bởi vì mình đã để display:none; ở #fixmenu. Vì mình muốn khi cuộn trang thì menu mới hiện ra.

jQuery

Thực ra thì phần này cũng có thể dùng javascript thuần, nhưng viết khá mệt và jQuery là một thư viện phổ biến. Nên chúng ta dùng jQuery.
Đoạn mã này nên đặt ở cuối, trước khi đóng thẻ . Hoặc trong file footer.php của wordpress. Dĩ nhiên là bạn phải thêm thư viện jQuery trước khi sử dụng đoạn này.

$(document).ready(function() {
    $(window).scroll(function() {
        if(document.body.scrollTop > 300)
            $('#fixmenu').fadeIn( "slow", function() { });
        else
            $('#fixmenu').fadeOut( "slow", function() { });
    });

    $('a#scrolltotop').click(function() {
        $('html, body').animate({scrollTop:0}, 100);
        return false;
    });
});

Nhìn đoạn code này cũng tương đối dễ hiểu.
Dòng 3: nếu cuộn xuống quá 300px so với top thì sẽ fadeIn (hiệu ứng của jQuery) hiện ra menu, nếu không thì sẽ fadeOut ẩn menu đi.

Ở dòng số 9 là bắt sự kiện khi bấm vào nút Scroll to top thì sẽ quay lại lên đầu trang, sử dụng jQuery để chuyển động lên nhìn mượt mà hơn.

Đến đây tất cả đã hoàn tất, chúc mọi người sáng tạo ra nhiều menu đẹp :)

Tham khảo: CWC

Xây dựng fixed menu trong 3 bước

HTML

CSS

jQuery