A movable, resizable menu on a webpage.
Per
// ==UserScript==
// @name Movable & Resizable Menu Script
// @namespace http://tampermonkey.net/
// @version 0.2
// @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'; // Default start position
menu.style.left = '100px'; // Default start position
menu.style.width = '300px'; // Larger size
menu.style.height = '200px'; // Larger size
menu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
menu.style.color = 'white';
menu.style.padding = '10px';
menu.style.borderRadius = '10px';
menu.style.zIndex = '1000';
menu.style.cursor = 'move'; // Cursor for dragging
// Add title
const title = document.createElement('h3');
title.textContent = 'Movable Menu';
title.style.margin = '0 0 10px 0';
menu.appendChild(title);
// Add menu items (customize as needed)
const item1 = document.createElement('button');
item1.textContent = 'Action 1';
item1.style.marginBottom = '5px';
item1.style.width = '100%';
item1.onclick = function() {
alert('Action 1 triggered!');
};
menu.appendChild(item1);
const item2 = document.createElement('button');
item2.textContent = 'Action 2';
item2.style.marginTop = '5px';
item2.style.width = '100%';
item2.onclick = function() {
alert('Action 2 triggered!');
};
menu.appendChild(item2);
// 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);
})();