Hướng dẫn tạo Floating Action Button (FAB) kiểu Android với menu mở rộng

23/10/2025 0 13 3 phút đọc

Demo

Floating Action Button (FAB) dạng mở rộng là một thành phần giao diện hiện đại, cho phép người dùng truy cập nhanh nhiều chức năng chỉ với một nút nổi duy nhất. FAB sẽ nằm cố định ở góc màn hình, khi nhấn vào sẽ bung ra các nút con với hiệu ứng trượt và fade mượt mà theo phong cách Material Design.

Hướng dẫn tạo Floating Action Button (FAB) kiểu Android với menu mở rộng

Mục lục

FAB mở rộng là gì?
Cấu trúc HTML của FAB mở rộng
CSS tạo hiệu ứng FAB + menu fan-out
JavaScript điều khiển mở/đóng menu
Demo Floating Action Button (FAB) mở rộng
Mở rộng FAB
Kết luận

FAB mở rộng là gì?

FAB mở rộng (Extended FAB) là phiên bản nâng cấp của nút nổi truyền thống. Thay vì chỉ thực hiện một hành động, FAB mở rộng có thể hiển thị một nhóm hành động phụ, ví dụ:

Tạo mới nội dung.
Mở form liên hệ.
Cuộn lên đầu trang.
Mở menu hoặc công cụ nhanh.

Đặc điểm quan trọng của FAB mở rộng:

Luôn cố định vị trí.
Có hiệu ứng animate vào/ra.
Icon xoay khi mở menu.
Chứa nhiều nút con với animation fan-out.

Cấu trúc HTML của FAB mở rộng

<div class="fab-container uk-position-fixed uk-position-bottom-left uk-position-small">

    <div class="fab-menu" id="fab-menu">
        <button class="fab-item uk-button uk-button-default">A</button>
        <button class="fab-item uk-button uk-button-default">B</button>
        <button class="fab-item uk-button uk-button-default">C</button>
    </div>

    <button id="fab-main" class="fab-main uk-button uk-button-primary">+</button>
</div>

CSS tạo hiệu ứng FAB + menu fan-out

.fab-container {
    z-index: 9999;
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    transition: transform 0.25s ease;
}

.fab-main.open {
    transform: rotate(45deg);
}

.fab-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;

    position: relative;
}

.fab-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    opacity: 0;
    transform: translateY(20px) scale(0.7);
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.fab-item.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

JavaScript điều khiển mở/đóng menu

(function() {
    var main = document.getElementById("fab-main");
    var items = document.querySelectorAll(".fab-item");

    main.addEventListener("click", function() {

        var isOpen = main.classList.toggle("open");

        items.forEach(function(item, i) {
            if (isOpen) {
                setTimeout(function() {
                    item.classList.add("show");
                }, i * 60);
            } else {
                setTimeout(function() {
                    item.classList.remove("show");
                }, i * 60);
            }
        });
    });
})();