Làm thanh menu ở chân trang

Làm thanh menu cố định ở chân trang với HTML, CSS và jQuery

Thanh menu cố định (footer tools bar) ở chân trang là một cách hay để giúp người dùng truy cập nhanh các chức năng quan trọng như: trở về đầu trang, xem bình luận, chuyển chế độ sáng/tối, hoặc điều hướng trong bài viết.

Bài viết này hướng dẫn cách tạo một thanh menu như vậy bằng HTML, CSS và jQuery. Thanh menu này chỉ hiện khi người dùng **cuộn lên**, giúp tiết kiệm không gian nhưng vẫn đảm bảo tính tiện dụng.

1. HTML – Khung giao diện menu

Cấu trúc HTML đơn giản, sử dụng biểu tượng từ Font Awesome:

<div class="footer-tools-bar text-center hidden">
    <div class="container">
        <div class="auto-scroll-container">
            <span class="fas fa-bars"></span>
            <span class="divide-bar"></span>
            <a href="https://inithtml.com/"><span class="fas fa-home"></span></a>
            <span class="divide-bar"></span>
            <a href="#"><span class="fas fa-level-up-alt"></span></a>
            <span class="divide-bar"></span>
            <a class="m-r-7" href="#"><span class="fas fa-arrow-left"></span></a> /
            <a href="#"><span class="fas fa-arrow-right"></span></a>
            <span class="divide-bar"></span>
            <span class="fas fa-moon" title="Chuyển sang sáng/tối"></span>
            <span class="divide-bar"></span>
            <a href="#comments"><span class="fas fa-comment"></span></a>
            <span class="divide-bar hidden-xs"></span>
            <span class="timer">120</span>
            <span class="divide-bar hidden-xs"></span>
            <span class="fas fa-chevron-up back-to-top hidden-xs" title="Trở lên trên"></span>
        </div>
    </div>
</div>

2. CSS – Tạo kiểu cho thanh công cụ

Đoạn CSS dưới đây giúp thanh menu hiển thị đẹp, cố định dưới cùng màn hình, có hiệu ứng hover nhẹ:

.footer-tools-bar {
    background: #eee;
    box-shadow: 0 0 11px 1px rgba(0, 0, 0, 0.15);
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 45px;
    height: 45px;
    z-index: 998;
}

.auto-scroll-container {
    font-size: 18px;
    height: 45px;
    transition: all 0.2s ease;
}

.auto-scroll-container span {
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-scroll-container span.m-r-7 {
    margin-right: 7px;
}

.auto-scroll-container span:hover,
.auto-scroll-container span.active {
    color: #1463f3;
}

.divide-bar {
    border-left: 1px solid #ccc;
    margin: 0 15px;
}

.auto-scroll-container .timer {
    display: inline-block;
    width: 25px;
    text-align: center;
}

3. jQuery – Ẩn/hiện menu khi cuộn

Đoạn jQuery sau sẽ ẩn menu khi người dùng cuộn xuống, và chỉ hiển thị lại khi người dùng cuộn lên:

<script type="text/javascript">
jQuery(document).ready(function($) {
    var lastScrollTop = 0;
    $(window).on("scroll", function() {
        var currScrollTop = $(this).scrollTop();
        if (currScrollTop == 0 || currScrollTop > lastScrollTop) {
            if (!$('.footer-tools-bar').hasClass('hidden')) {
                $('.footer-tools-bar').addClass('hidden');
                if ($('.sticky-footer').length > 0) {
                    $('.sticky-footer').css('bottom', '0');
                }
            }
        } else if (currScrollTop < (lastScrollTop - 10)) {
            if ($('.footer-tools-bar').hasClass('hidden')) {
                $('.footer-tools-bar').removeClass('hidden');
                if ($('.sticky-footer').length > 0) {
                    $('.sticky-footer').css('bottom', '45px');
                }
            }
        }
        lastScrollTop = currScrollTop;
    });
});
</script>

Tham khảo thêm

• Nút Trở lên đầu trang đơn giản với Bootstrap 3

Kết luận

Thanh menu cố định ở chân trang là một tiện ích UX hữu dụng, giúp cải thiện điều hướng và giữ người dùng tương tác nhiều hơn. Bạn có thể tùy biến theo nhu cầu: thêm icon, thay đổi vị trí, hoặc chuyển sang dùng pure JavaScript nếu không muốn phụ thuộc jQuery.