☰

Movable & Resizable Menu Script

A movable, resizable menu on a webpage.

目前為 2024-10-02 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Movable & Resizable Menu Script
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  A movable, resizable menu on a webpage.
// @author       You
// @match        *://*/*
// @grant        none
// @license      MrSticker23
// ==/UserScript==

(function() {
    'use strict';

    // Create menu container
    const menu = document.createElement('div');
    menu.style.position = 'fixed';
    menu.style.top = '100px';
    menu.style.left = '100px';
    menu.style.width = '500px';  // Bigger menu width
    menu.style.height = '400px'; // Bigger menu height
    menu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
    menu.style.color = 'white';
    menu.style.display = 'flex';
    menu.style.borderRadius = '10px';
    menu.style.zIndex = '1000';
    menu.style.cursor = 'move';

    // Create sidebar
    const sidebar = document.createElement('div');
    sidebar.style.width = '120px'; // Sidebar width
    sidebar.style.backgroundColor = '#333';
    sidebar.style.display = 'flex';
    sidebar.style.flexDirection = 'column';
    sidebar.style.justifyContent = 'flex-start';
    sidebar.style.padding = '10px';
    sidebar.style.borderRight = '2px solid #555';

    // Create content container (main menu area)
    const contentContainer = document.createElement('div');
    contentContainer.style.flexGrow = '1'; // Content container grows to fill space
    contentContainer.style.padding = '20px';

    // Sections for the content area
    const section1 = document.createElement('div');
    section1.innerHTML = '<h3>Section 1</h3><p>This is the content for section 1.</p>';

    const section2 = document.createElement('div');
    section2.innerHTML = '<h3>Section 2</h3><p>This is the content for section 2.</p>';

    const section3 = document.createElement('div');
    section3.innerHTML = '<h3>Section 3</h3><p>This is the content for section 3.</p>';

    // Display the first section initially
    contentContainer.appendChild(section1);

    // Function to switch sections
    function showSection(section) {
        contentContainer.innerHTML = ''; // Clear previous content
        contentContainer.appendChild(section);
    }

    // Sidebar buttons
    const btn1 = document.createElement('button');
    btn1.textContent = 'Section 1';
    btn1.style.marginBottom = '10px';
    btn1.onclick = function() {
        showSection(section1);
    };
    sidebar.appendChild(btn1);

    const btn2 = document.createElement('button');
    btn2.textContent = 'Section 2';
    btn2.style.marginBottom = '10px';
    btn2.onclick = function() {
        showSection(section2);
    };
    sidebar.appendChild(btn2);

    const btn3 = document.createElement('button');
    btn3.textContent = 'Section 3';
    btn3.onclick = function() {
        showSection(section3);
    };
    sidebar.appendChild(btn3);

    // Append sidebar and content container to the menu
    menu.appendChild(sidebar);
    menu.appendChild(contentContainer);

    // Make the menu draggable
    let isDragging = false;
    let offsetX, offsetY;

    menu.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - parseInt(menu.style.left);
        offsetY = e.clientY - parseInt(menu.style.top);
        menu.style.cursor = 'grabbing'; // Change cursor while dragging
    });

    document.addEventListener('mousemove', function(e) {
        if (isDragging) {
            menu.style.left = (e.clientX - offsetX) + 'px';
            menu.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
        menu.style.cursor = 'move'; // Reset cursor when not dragging
    });

    // Append the menu to the body
    document.body.appendChild(menu);

})();