Interactive Drag-and-Drop Bubble Menu with Icon Animations

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;

// New list of links for the first element
const newLinks = [
    "https://codecanyon.net/item/polyutilities-for-perfex-crm-quick-access-menu-custom-js-css-and-more/49522529",
    "https://www.youtube.com/watch?v=1q3smzLWt_U&list=PLm5WiYDos7pNZW_i2L56jVB1pfNVefH1D",
    "https://perfexmodules.wikipoly.com/admin/authentication?u=demo.adminthankpolyxgo.vn&p=thankyou",
    "https://codecanyon.net/item/polyutilities-for-perfex-crm-quick-access-menu-custom-js-css-and-more/reviews/49522529",
    "https://www.facebook.com/polyxgoltd",
    "https://codecanyon.net/item/polyutilities-for-perfex-crm-quick-access-menu-custom-js-css-and-more/49522529/comments",
    "https://codecanyon.net/user/polyxgo",
    "https://wikipoly.com/en/how-to-create-banners-in-perfex-crm/",
    "https://wikipoly.com/en/guide-to-install-and-use-polyutilities-for-perfex-crm/"
];

// Create a copy of newLinks and shuffle for the second element
const newLinks2 = [...newLinks];
shuffleArray(newLinks);
shuffleArray(newLinks2);

// Function to shuffle the list of links randomly
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // Swap positions
    }
}

// Function to create bubble container
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 to enable drag functionality with the left mouse button only
function makeDraggable(element) {
    let posX = 0, posY = 0, posInitialX = 0, posInitialY = 0;
    let isDragging = false;
    let dragThreshold = 5;

element.onmousedown = function (e) {
        // Only apply drag if the left mouse button is pressed
        if (e.button !== 0) return;

e.preventDefault();
        posInitialX = e.clientX;
        posInitialY = e.clientY;
        isDragging = false;
        element.setAttribute('data-was-dragged', 'false');

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;
            element.setAttribute('data-was-dragged', 'true');
        }

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;

// Reset flag after dragging to prevent unintended clicks on anchors
        setTimeout(() => {
            element.setAttribute('data-was-dragged', 'false');
            isDragging = false; // Reset drag state
        }, 100);
    }

element.addEventListener('click', function (e) {
        // Prevent click events on anchors if dragging just occurred
        if (isDragging || element.getAttribute('data-was-dragged') === 'true') {
            e.stopImmediatePropagation();
            e.preventDefault();
            return;
        }

const bubble = element.querySelector('.bubble');
        const iconsContainer = element.querySelector('.icons-container');

document.querySelectorAll('.icons-container.active').forEach(container => {
            container.classList.remove('active');
            const associatedBubble = container.previousElementSibling;
            associatedBubble.style.transform = 'scale(1)';
        });

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.target = "_blank"; // Open in a new tab
        iconElement.rel = "nofollow"; // Add nofollow attribute
        iconElement.className = `icon-item ${hoverEffectClass}`;
        iconElement.innerHTML = icon.icon;

// Prevent click when just dragged
        iconElement.addEventListener('click', (e) => {
            if (bubbleContainer.getAttribute('data-was-dragged') === 'true') {
                e.preventDefault(); // Prevent click when just dragged
            }
        });

iconsContainer.insertBefore(iconElement, closeBtn);
    });

bubble.addEventListener('click', () => {
        if (bubbleContainer.getAttribute('data-was-dragged') === 'true') return;

highestZIndex++;
        iconsContainer.style.zIndex = highestZIndex;

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

closeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        iconsContainer.classList.remove('active');
        bubble.style.transform = 'scale(1)';
    });
}

// Example config array for bubble containers with links replaced and shuffled
const bubbleConfigs = [
    {
        top: '150px',
        left: '468px',
        icons: [
            { title: 'Icon 1', icon: '➀', href: newLinks[0] },
            { title: 'Icon 2', icon: '➁', href: newLinks[1] },
            { title: 'Icon 3', icon: '➂', href: newLinks[2] },
            { title: 'Icon 4', icon: '➃', href: newLinks[3] },
            { title: 'Icon 5', icon: '➄', href: newLinks[4] },
            { title: 'Icon 6', icon: '➅', href: newLinks[5] },
            { title: 'Icon 7', icon: '➆', href: newLinks[6] },
            { title: 'Icon 8', icon: '➇', href: newLinks[7] },
            { title: 'Icon 9', icon: '➈', href: newLinks[8] },
        ],
        hoverEffect: 'zoom-push'
    },
    {
        top: '200px',
        left: '300px',
        icons: [
            { title: 'Icon 10', icon: '➉', href: newLinks2[0] },
            { title: 'Icon 11', icon: '➊', href: newLinks2[1] },
            { title: 'Icon 12', icon: '➋', href: newLinks2[2] },
            { title: 'Icon 13', icon: '➌', href: newLinks2[3] },
            { title: 'Icon 14', icon: '➍', href: newLinks2[4] },
            { title: 'Icon 15', icon: '➎', href: newLinks2[5] },
            { title: 'Icon 16', icon: '➏', href: newLinks2[6] },
            { title: 'Icon 17', icon: '➐', href: newLinks2[7] },
            { title: 'Icon 18', icon: '➑', href: newLinks2[8] },
        ],
        hoverEffect: 'zoomInOut'
    }
];

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

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

By me a coffee

<body>

@polyxgo

PolyXGO

This feature integrates All-in-One Contact Support into the PolyUtilties module for PerfexCRM, providing an interactive interface where administrators can drag and drop elements to customize the display positions of the Scroll to Top and All-in-One Contact buttons on Perfex.

Clicking a button smoothly reveals hidden icons within the bubble, while simultaneously shrinking the bubble itself. Opening a new bubble automatically closes the previous one, ensuring a clutter-free interface. A close button allows users to hide icons as needed, enhancing control over the display.

Hover animations bring icons to life, adding a dynamic feel on hover. The system intelligently differentiates between dragging and clicking actions, ensuring that menus are only triggered intentionally. This setup is ideal for optimizing both user engagement and visual appeal.

Additionally, the code supports expanding multiple menus by adjusting arbitrary elements within the bubbleConfigs array, allowing for further customization of the interface layout.

HTML

CSS

JavaScript

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

Login

Register