Interactive Drag-and-Drop Bubble Menu with Icon Animations

This feature provides an interactive interface with draggable and expandable bubble menus. Each bubble contains hidden icons that appear when clicked. Users can freely drag bubbles around the browser window, allowing flexible layout.

Clicking a bubble smoothly reveals the icons while shrinking the bubble. If another bubble is opened, the previous one closes automatically, preventing interface overlap. A close button allows users to hide the icons at any time.

Hover effects animate the icons, adding a dynamic touch when hovered over. The system distinguishes between dragging and clicking, ensuring menus aren’t triggered accidentally. This is an ideal feature for enhancing both user interaction and visual appeal.

Code integrates the ability to expand multiple menus by adjusting arbitrary elements within bubbleConfigs array.

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: Interactive Drag-and-Drop Bubble Menu with Icon Animations

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Interactive Drag-and-Drop Bubble Menu with Icon Animations

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: Interactive Drag-and-Drop Bubble Menu with Icon Animations

Login