Cách chuyển Menu thành Sticky Menu trên Website

{tocify} $title={Table of Contents}

Main Menu là gì?

Hầu hết các trang web đều có một thanh Menu, một số trang khác có thể có top menu và sub menu.  Trong đó menu chính thường được gọi là menu chính (main menu). Menu chính nằm cố định ở vị trí đầu trang web. 

Để tiện cho người dùng truy cập nhanh vào các mục khác của menu khi cuộn trang xuống phía đưới. Các lập trình viên đã tạo ra một Sticky Menu. Cho dù người dùng có cuộn trang xuống đến đâu thì menu cũng xuất hiện trên đầu màn hình. Rất hay và hữu ích đúng không các bạn?

Nếu menu trên trang web của bạn không có tính năng này, thì các bạn có thể tham khảo và áp dụng cách làm sau đây nhé.

Cách chuyển Menu thành Sticky Menu

Đầu tiên các bạn thêm cặp <div> bao quanh menu chính.

<div class="sticky-menu">

Main menu

</div>

1. Trường hợp menu chính nằm trên cùng (top = 0)

Các bạn vào phần quản lý Blogger, rồi vào Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, tìm thẻ ]]></b:skin>. Dán đoạn CSS bên dưới vào trên thẻ vừa tìm thấy.

.sticky-menu{
	position: fixed; 
    top: 0px; 
    left: 0px; 
    z-index: 999; 
    width:100%;
}

Lưu lại thao tác trên template, rồi tải lại trang để xem kết quả nhé.

2. Trường hợp menu chính cách top một đoạn 

Các bạn vào phần quản lý Blogger, rồi vào Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, tìm thẻ ]]></b:skin>. Dán đoạn CSS bên dưới vào trên thẻ vừa tìm thấy.

.sticky-menu {
	background: #ffffff;
        height: 46px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        left: 0px;
        right: 0px;
        position: relative;
        z-index: 9999;
}
.fixed { position:fixed;}

Tiếp tục tìm thẻ </body>, dán tiếp đoạn code jquery bên dưới vào trên thẻ </body>.

<script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
        var aboveH = $('div#header-wrap').outerHeight();
        $(window).scroll(function(){
            if ($(window).scrollTop() > aboveH){
                $('div.sticky-menu').addClass('fixed').css('top','0').next().css('padding-top','100px');
            } else {
                $('div.sticky-menu').removeClass('fixed').next().css('padding-top','0');
            }
        });
    });
    //]]>
</script>

Các bạn nhớ lưu lại các thao tác trên template, tải lại trang và tận hưởng kết quả. Đúng là rất đơn giản và dễ thực hiện phải không các bạn?