Apologies if my wording is not clear, allow me to clarify.
I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear when the main button is clicked again, essentially creating a toggleable dropdown menu.
Here is a snippet of the current userscript:
// ==/UserScript==
var menuButton = document.createElement ('div');
menuButton.innerHTML = '<button id="mainButton" type="button">'
+ 'Glass</button>'
;
menuButton.setAttribute ('id', 'myContainer');
document.body.appendChild (menuButton);
//Click listener
document.getElementById ("mainButton").addEventListener (
"click", openStuff, false
);
function openStuff (zEvent) {
/*--- Dummy action, just adds a line of text to the top
of the screen.
*/
var menuButton = document.createElement ('p');
menuButton.innerHTML = 'Clicked.';
document.getElementById ("myContainer").appendChild (menuButton);
}
// Style
GM_addStyle ( `
#myContainer {
position: absolute;
top: 0;
left: 0;
font-size: 20px;
z-index: 1100;
}
#mainButton {
cursor: pointer;
}
#myContainer p {
color: black;
}
` );
At the moment, clicking the main button simply adds a transparent line of dummy text below it. I have limited experience with CSS and my JavaScript knowledge is mainly focused on Node.js, leaving me feeling quite lost. Any guidance or assistance would be greatly appreciated.