Rotation-Menu-1.03

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;
      let radiusChangeSpeed = 10;
      let currentSelectedItem = null;
            
            
            
            
            
      document.addEventListener('mousedown', (event) => {if (event.button === 0) {isLeftMouseButtonDown = true;} });
     	document.addEventListener('mouseup', (event)=> {if (event.button === 0) {isLeftMouseButtonDown = false;} });
            
            
      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 = 'transparent';
            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 = '25px';
            menuContainer.style.backgroundColor = 'red';
            menuContainer.style.position = 'absolute';
            menuContainer.style.left = `${posX}px`;
           ...

CSS

/* Base styles for all menu items */
.menu-item {
  position: absolute;
  background: linear-gradient(145deg, #3a7bd5, #3a6073);
  width: 60px;
  height: 60px;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 
              inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
.menu-item:hover {
  background: linear-gradient(145deg, #4caf50, #388e3c); /* Green gradient on hover */
  transform: scale(1.1); /* Slight scale-up on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
              inset 0 3px 6px rgba(255, 255, 255, 0.15);
}


.menu-text {text-align: center;}

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

.tooltip.show {display: block;}

JavaScript

const menuData = [
   { id: 'item1', title: 'bbb 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...