Menu bong bóng tương tác kéo thả kèm hiệu ứng

Tính năng này cung cấp giao diện tương tác với các menu bong bóng có thể kéo thả và mở rộng. Mỗi bong bóng chứa các biểu tượng ẩn sẽ xuất hiện khi được nhấp. Người dùng có thể kéo thả tự do các bong bóng trong cửa sổ trình duyệt, giúp bố cục linh hoạt hơn.

Khi nhấp vào bong bóng, các biểu tượng sẽ hiện ra mượt mà trong khi bong bóng thu nhỏ lại. Nếu một bong bóng khác được mở, bong bóng trước đó sẽ tự động đóng để tránh chồng chéo giao diện. Nút đóng giúp người dùng ẩn biểu tượng bất cứ lúc nào.

Hiệu ứng hover làm biểu tượng trở nên sinh động hơn khi di chuột qua. Code tính năng phân biệt giữa thao tác kéo và nhấp, đảm bảo các menu không bị kích hoạt không đúng.

Code tích hợp sẵn việc mở rộng nhiều menu bằng cách điều chỉnh các phần tử tùy ý trong mảng bubbleConfigs.

HTML

CSS

body {
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
}

.bubble-container {
    position: absolute;
    cursor: move;
}

.bubble {
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 10;
    margin: 10px;
}

.bubble span {
    color: white;
    font-size: 30px;
}

.icons-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: rgb(225 225 225 / 50%);
    border-radius: 10px;
    padding: 10px;
    opacity: 0;
    transform: scale(0);
    width: auto;
    max-width: 300px;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(0);
    z-index: 5;
}

.icons-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

a.icon-item {
    text-decoration: none;
    font-size: 40px;
    color: #000;
}

.icon-item {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.icons-container.active .icon-item {
    opacity: 1;
    transform: scale(1);
}

.zoom-push:hover {
    transform: scale(1.2) translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

50% {
        transform: scale(0.9);
    }

100% {
        transform: scale(1.1);
    }
}

@keyframes zoomBack {
    0% {
        transform: scale(1.1);
    }

100% {
        transform: scale(1);
    }
}

.zoomInOut:hover {
    animation: zoomInOut 0.3s forwards;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.zoomInOut {
    animation: zoomBack 0.3s forwards;
}

.close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.icons-container.active .close-btn {
    display: flex;
}

@media (max-width: 300px) {
    .icons-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 200px) {
    .icons-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

JavaScript

let highestZIndex = 100;

function createBubbleContainer(config) {
    const container = document.createElement('div');
    container.className = 'bubble-container';
    container.setAttribute('data-item', JSON.stringify(config.icons));
    container.setAttribute('data-animate-hover-item', config.hoverEffect);
    container.style.position = 'absolute';

// Set container position based on config
    if (config.top !== undefined) container.style.top = config.top;
    if (config.left !== undefined) container.style.left = config.left;
    if (config.right !== undefined) container.style.right = config.right;
    if (config.bottom !== undefined) container.style.bottom = config.bottom;

container.innerHTML = `
        <div class="bubble">
            <span>+</span>
        </div>
        <div class="icons-container">
            <button class="close-btn">X</button>
        </div>
    `;

document.body.appendChild(container);

const iconsData = config.icons;
    renderBubble(container, iconsData);
    makeDraggable(container);
}

function makeDraggable(element) {
    let posX = 0, posY = 0, posInitialX = 0, posInitialY = 0;
    let isDragging = false; // Variable to track drag state
    let dragThreshold = 5; // Threshold to differentiate between click and drag

element.onmousedown = function (e) {
        e.preventDefault();
        posInitialX = e.clientX;
        posInitialY = e.clientY;
        isDragging = false; // Reset drag state
        element.setAttribute('data-was-dragged', 'false'); // Reset drag state on element

document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    };

function elementDrag(e) {
        e.preventDefault();
        let deltaX = Math.abs(posInitialX - e.clientX);
        let deltaY = Math.abs(posInitialY - e.clientY);

if (deltaX > dragThreshold || deltaY > dragThreshold) {
            isDragging = true; // Set drag state if movement exceeds threshold
            element.setAttribute('data-was-dragged', 'true'); // Mark element as dragged
        }

posX = posInitialX - e.clientX;
        posY = posInitialY - e.clientY;
        posInitialX = e.clientX;
        posInitialY = e.clientY;

element.style.top = (element.offsetTop - posY) + "px";
        element.style.left = (element.offsetLeft - posX) + "px";
    }

function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;

// Set timeout to reset flag after dragging to prevent immediate clicks
        setTimeout(() => {
            element.setAttribute('data-was-dragged', 'false'); // Reset drag state after dragging
        }, 100);
    }

// Prevent click event if drag just occurred
    element.addEventListener('click', function (e) {
        if (isDragging || element.getAttribute('data-was-dragged') === 'true') {
            e.stopImmediatePropagation(); // Prevent click event if dragging occurred
            return; // Exit immediately if drag just occurred
        }

// Logic to open icons-container only when not dragging
        const bubble = element.querySelector('.bubble');
        const iconsContainer = element.querySelector('.icons-container');

// Close all other containers before opening the current one
        document.querySelectorAll('.icons-container.active').forEach(container => {
            container.classList.remove('active');
            const associatedBubble = container.previousElementSibling;
            associatedBubble.style.transform = 'scale(1)';
        });

// Set highest z-index for the current container
        highestZIndex++;
        iconsContainer.style.zIndex = highestZIndex;

bubble.style.transform = 'scale(0)';
        setTimeout(() => {
            iconsContainer.classList.add('active');
        }, 300);
    });
}

// Function to render bubble
function renderBubble(bubbleContainer, iconsData) {
    const bubble = bubbleContainer.querySelector('.bubble');
    const iconsContainer = bubbleContainer.querySelector('.icons-container');
    const closeBtn = iconsContainer.querySelector('.close-btn');
    const hoverEffectClass = bubbleContainer.getAttribute('data-animate-hover-item');

iconsData.forEach(icon => {
        const iconElement = document.createElement('a');
        iconElement.href = icon.href;
        iconElement.className = `icon-item ${hoverEffectClass}`;
        iconElement.innerHTML = icon.icon;
        iconsContainer.insertBefore(iconElement, closeBtn);
    });

bubble.addEventListener('click', () => {
        if (bubbleContainer.getAttribute('data-was-dragged') === 'true') return; // Do nothing if drag just occurred

// Set highest z-index for the current container
        highestZIndex++;
        iconsContainer.style.zIndex = highestZIndex;

bubble.style.transform = 'scale(0)';
        setTimeout(() => {
            iconsContainer.classList.add('active');
        }, 300);
    });

closeBtn.addEventListener('click', (e) => {
        e.stopPropagation(); // Prevent click event from propagating

// Close all containers when close button is clicked
        iconsContainer.classList.remove('active');
        bubble.style.transform = 'scale(1)';
    });
}

// Example config array for bubble containers
const bubbleConfigs = [
    {
        top: '10px',
        left: '10px',
        icons: [
            { title: 'Icon 1', icon: '➀', href: '#link1' },
            { title: 'Icon 2', icon: '➁', href: '#link2' },
            { title: 'Icon 3', icon: '➂', href: '#link3' },
            { title: 'Icon 4', icon: '➃', href: '#link4' },
            { title: 'Icon 5', icon: '➄', href: '#link5' },
            { title: 'Icon 6', icon: '➅', href: '#link6' },
            { title: 'Icon 7', icon: '➆', href: '#link4' },
            { title: 'Icon 8', icon: '➇', href: '#link5' },
            { title: 'Icon 9', icon: '➈', href: '#link6' },
        ],
        hoverEffect: 'zoom-push'
    },
    {
        top: '200px',
        left: '300px',
        icons: [
            { title: 'Icon 10', icon: '➉', href: '#link10' },
            { title: 'Icon 11', icon: '➊', href: '#link11' },
            { title: 'Icon 12', icon: '➋', href: '#link12' },
            { title: 'Icon 13', icon: '➌', href: '#link13' },
            { title: 'Icon 14', icon: '➍', href: '#link14' },
            { title: 'Icon 15', icon: '➎', href: '#link15' },
            { title: 'Icon 16', icon: '➏', href: '#link16' },
            { title: 'Icon 17', icon: '➐', href: '#link17' },
            { title: 'Icon 18', icon: '➑', href: '#link18' },
        ],
        hoverEffect: 'zoomInOut'
    }
];

// Create bubble containers from config array
bubbleConfigs.forEach(config => createBubbleContainer(config));

Preview: Menu bong bóng tương tác kéo thả kèm hiệu ứng

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Menu bong bóng tương tác kéo thả kèm hiệu ứng

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Menu bong bóng tương tác kéo thả kèm hiệu ứng

Đăng nhập