Rotation-Menu-1.01

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Round Menu with Tooltip and Submenus</title>
    
    <style>
      /* Add your styles here */
    </style>
    
    <script>
      let isLeftMouseButtonDown = false;
      let currentRotation = 0;
      
      const tooltip = document.createElement('div');
      		  tooltip.className = 'tooltip';
      document.body.appendChild(tooltip);
      
            
      function createMenuAtPosition(posX, posY, options) {console.log('Creating menu...');
        let menu = document.createElement('div');
            menu.className = 'circle-menu';
            menu.id = 'circleMenu';
            menu.style.position = 'relative';
            menu.style.backgroundColor = 'red';
            menu.style.width = '100%';
            menu.style.height = '100%';
            menu.style.backgroundColor = 'grey';
            menu.style.display = 'flex';
            menu.style.justifyContent = 'center';
            menu.style.alignItems = 'center';
            menu.style.borderRadius = '50%';

        let menuContainer = document.createElement('div');
            menuContainer.className = 'menu-container';
            menuContainer.id = 'menuContainer';
            menuContainer.style.height = `${options.itemRadius * 2}px`;
            menuContainer.style.width = menuContainer.style.height;
            menuContainer.style.borderRadius = '5px';
            menuContainer.style.backgroundColor = 'red';
            menuContainer.style.position = 'absolute';
            menuContainer.style.left = `${posX}px`;
            menuContainer.style.top = `${posY}px`;
            menuContainer.style.display = 'flex';
            menuContainer.style.justifyContent = 'center';
            menuContainer.style.alignItems = 'center';
            menuContainer.style.transformOrigin = 'center';
            menuContainer.appendChild(menu);
      ...

CSS

.tooltip {
      
      color: #fff;
      padding: 5px;
      border-radius: 3px;
      font-size: 16px;
      display: none;
      pointer-events: none;
      z-index: 9999;
    }

    .tooltip.show {
      display: block;
    }

JavaScript

const menuData = [
   { id: 'item1', title: 'Item 1', submenu: [
     { id: 'subitem1', title: 'Subitem 1.1', submenu: [
       { id: 'subsubitem1', title: 'Subsubitem 1.1.1', action: () => alert('Subsubitem 1.1.1 clicked') },
       { id: 'subsubitem2', title: 'Subsubitem 1.1.2', action: () => alert('Subsubitem 1.1.2 clicked') },
     ] },
     { id: 'subitem2', title: 'Subitem 1.2', action: () => alert('Subitem 1.2 clicked') },
   	] 
   },
   
   { id: 'item2', title: 'Item 2', submenu: [
     { id: 'subitem3', title: 'Subitem 2.1', action: () => alert('Subitem 2.1 clicked') },
     { id: 'subitem4', title: 'Subitem 2.2', action: '', submenu: [
       { id: 'subsubitem1', title: 'Subsubitem 2.2.1', action: () => alert('Subsubitem 2.2.1 clicked'), submenu: [
         { id: 'subsubitem1', title: 'Subsubitem 2.2.1', action: () => alert('Subsubitem 2.2.1 clicked') },
         { id: 'subsubitem2', title: 'Subsubitem 2.2.2', action: () => alert('Subsubitem 2.2.2 clicked') },
       ] 
       },
       	{ id: 'subsubitem2', title: 'Subsubitem 2.2.2', action: () => alert('Subsubitem 2.2.2 clicked'), submenu: [
           { id: 'subsubitem1', title: 'Subsubitem 2.2.1', action: () => alert('Subsubitem 2.2.1 clicked') },
           { id: 'subsubitem2', title: 'Subsubitem 2.2.2', action: () => alert('Subsubitem 2.2.2 clicked') },
         ] },
       ] },
     ] 
   },
   
   { id: 'item3', title: 'Item 3', action: () => alert('Item 3 clicked') },
   
   { id: 'item4', title: 'Item 4', submenu: [
       { id: 'subitem1', title: 'Subitem 1.1', submenu: [
         { id: 'subsubitem1', title: 'Subsubitem 1.1.1', action: () => alert('Subsubitem 1.1.1 clicked') },
         { id: 'subsubitem2', title: 'Subsubitem 1.1.2', action: () => alert('Subsubitem 1.1.2 clicked') },
       ] },
       { id: 'subitem2', title: 'Subitem 1.2', action: () => alert('Subitem 1.2 clicked') },
     ] 
   },
   
   { id: 'item5', title: 'Item 5', submenu: [
     { id: 'subitem1', title: 'Subitem...