☰

Movable & Resizable Menu Script

A movable, resizable menu on a webpage.

当前为 2024-10-02 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Movable & Resizable Menu Script
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  A movable, resizable menu on a webpage.
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MrSticker23
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Create menu container
  16.     const menu = document.createElement('div');
  17.     menu.style.position = 'fixed';
  18.     menu.style.top = '100px';
  19.     menu.style.left = '100px';
  20.     menu.style.width = '500px';  // Bigger menu width
  21.     menu.style.height = '400px'; // Bigger menu height
  22.     menu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
  23.     menu.style.color = 'white';
  24.     menu.style.display = 'flex';
  25.     menu.style.borderRadius = '10px';
  26.     menu.style.zIndex = '1000';
  27.     menu.style.cursor = 'move';
  28.  
  29.     // Create sidebar
  30.     const sidebar = document.createElement('div');
  31.     sidebar.style.width = '120px'; // Sidebar width
  32.     sidebar.style.backgroundColor = '#333';
  33.     sidebar.style.display = 'flex';
  34.     sidebar.style.flexDirection = 'column';
  35.     sidebar.style.justifyContent = 'flex-start';
  36.     sidebar.style.padding = '10px';
  37.     sidebar.style.borderRight = '2px solid #555';
  38.  
  39.     // Create content container (main menu area)
  40.     const contentContainer = document.createElement('div');
  41.     contentContainer.style.flexGrow = '1'; // Content container grows to fill space
  42.     contentContainer.style.padding = '20px';
  43.  
  44.     // Sections for the content area
  45.     const section1 = document.createElement('div');
  46.     section1.innerHTML = '<h3>Section 1</h3><p>This is the content for section 1.</p>';
  47.  
  48.     const section2 = document.createElement('div');
  49.     section2.innerHTML = '<h3>Section 2</h3><p>This is the content for section 2.</p>';
  50.  
  51.     const section3 = document.createElement('div');
  52.     section3.innerHTML = '<h3>Section 3</h3><p>This is the content for section 3.</p>';
  53.  
  54.     // Display the first section initially
  55.     contentContainer.appendChild(section1);
  56.  
  57.     // Function to switch sections
  58.     function showSection(section) {
  59.         contentContainer.innerHTML = ''; // Clear previous content
  60.         contentContainer.appendChild(section);
  61.     }
  62.  
  63.     // Sidebar buttons
  64.     const btn1 = document.createElement('button');
  65.     btn1.textContent = 'Section 1';
  66.     btn1.style.marginBottom = '10px';
  67.     btn1.onclick = function() {
  68.         showSection(section1);
  69.     };
  70.     sidebar.appendChild(btn1);
  71.  
  72.     const btn2 = document.createElement('button');
  73.     btn2.textContent = 'Section 2';
  74.     btn2.style.marginBottom = '10px';
  75.     btn2.onclick = function() {
  76.         showSection(section2);
  77.     };
  78.     sidebar.appendChild(btn2);
  79.  
  80.     const btn3 = document.createElement('button');
  81.     btn3.textContent = 'Section 3';
  82.     btn3.onclick = function() {
  83.         showSection(section3);
  84.     };
  85.     sidebar.appendChild(btn3);
  86.  
  87.     // Append sidebar and content container to the menu
  88.     menu.appendChild(sidebar);
  89.     menu.appendChild(contentContainer);
  90.  
  91.     // Make the menu draggable
  92.     let isDragging = false;
  93.     let offsetX, offsetY;
  94.  
  95.     menu.addEventListener('mousedown', function(e) {
  96.         isDragging = true;
  97.         offsetX = e.clientX - parseInt(menu.style.left);
  98.         offsetY = e.clientY - parseInt(menu.style.top);
  99.         menu.style.cursor = 'grabbing'; // Change cursor while dragging
  100.     });
  101.  
  102.     document.addEventListener('mousemove', function(e) {
  103.         if (isDragging) {
  104.             menu.style.left = (e.clientX - offsetX) + 'px';
  105.             menu.style.top = (e.clientY - offsetY) + 'px';
  106.         }
  107.     });
  108.  
  109.     document.addEventListener('mouseup', function() {
  110.         isDragging = false;
  111.         menu.style.cursor = 'move'; // Reset cursor when not dragging
  112.     });
  113.  
  114.     // Append the menu to the body
  115.     document.body.appendChild(menu);
  116.  
  117. })();