Creating the script

First, add the start menu taskbar icon and start menu to the script

let startbutton = document.getElementsByClassName("startbutton")[0]
let startmenu = document.getElementsByClassName("startmenu")[0]

Now add the event listener to trigger the start menu to open and close on the click of a button.

startbutton.addEventListener("click", ()=>{

    if(startmenu.style.bottom == "55px"){
        startmenu.style.bottom = "-95%"
    }
    else{
        startmenu.style.bottom = "55px"
    }
})

This works good, but there are two problems. First, the start menu starts off open, which is wrong. Second, the start menu only closes if you click the button, and should close if you click anywhere.

To fix the first problem simply change this line of the css inside the start menu section

bottom: 55px;

To this line:

bottom: -95%;

To solve the second problem, we need to add a mouse up event listener, which listens for any mouse up

window.addEventListener('mouseup', function(e) {
        startmenu.style.bottom = "-95%";
});

Great, but now this will close the start menu before the icon can even open it, so we need to exclude the icon from the event listener.

window.addEventListener('mouseup', function(e) {
    if (!event.target.closest(".startbutton")){
        startmenu.style.bottom = "-95%";
    }
});

The event.target sees if it is clicked, and the ! stands for not, and the . in front of startmenu says it is looking for a class name. So this is saying if startbutton class is not clicked, then close the start menu.

But now the start menu closes when you click inside of it, so we need to exclude that too

window.addEventListener('mouseup', function(e) {
    if (!event.target.closest(".startmenu") && !event.target.closest(".startbutton")){
        startmenu.style.bottom = "-95%";
    }
});

The &&stands for and, so this script is saying if the startmenu and startbutton classes are not clicked, close the start menu.

Now, we have to add a line to the start menu css to make it "slide"

transition: all .2s cubic-bezier(.79,.14,.15,.86);

Next is the search menu