A movable, resizable menu on a webpage.
От
// ==UserScript==
// @name Movable & Resizable Menu Script
// @namespace http://tampermonkey.net/
// @version 0.3
// @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);
})();