Способ навесить действие через "on..." не важно "onclick" это или "onload" постоянно переписывается, лучше пользоваться addEventListener, которые можно добавлять сколько угодно и все они будут работать вместе, а от onclick и onload совсем отказаться. Вот пример:

window.addEventListener("load",()=>{
    //код
});

И да, если добавлять вызов скриптов в самый конец HTML-документа, то все элементы спокойно будут кверится без всяких использований эвентов(видимо с чем у вас и возникла проблема, когда вы решили воспользоваться onload).

Node.js ввиду удобств когда и на фронте и на бэке JavaScript. А для базы данных идеально подойдет любая база использующая JSON, например MongoDB.

Так же стоит глянуть в сторону Ruby on Rails

Создай меню внутри прозрачного элемента размером во весь экран и напиши следующий js-код
html:

<div style="width:100vw; height:100vh;" class="menu" id="прозрачный_элемент">
    <div id="меню"></div>
</div>
<!--Лучше не использовать русский язык в идентификаторах(да и вообще в любом коде), но я написал для наглядности \_(-_-)_/ -->

js:

кнопка_меню.addEventListenner("click",()=>{
    прозрачный_элемент.style.display = "block"; 
})

прозрачный_элемент.addEventListenner("click",(e)=>{
    if(e.target == прозрачный_элемент){
        прозрачный_элемент.style.display = "none";
    }
})

С этим способом transition не работает, но этот недочет можно обойти с помощью setTimeout