[FIXED] How to make full screen drawer menu from bottom in HTML?

Issue

I want to make a full screen drawer menu and that can open it from bottom, however I can not make open button on page bottom.

Is this a easy way to make sure button on page bottom in any resolution?

Here's my code

codepen.io/WildDagger/pen/QWMXZyz

(I don't know why stackoverflow editor always make annoying error so I just can paste it)

Solution

You have to place the nav to below the screen. To do that you need bottom: -100%;. That way the element will be completely invisible & this will work on all resolution. Check the code:

.menu-container {
    bottom: -100%;  /* Currently -375px */
    ...
}

menuBtnClose.addEventListener('click', function(e) {
    e.preventDefault()
    menuContainer.style.bottom = "-100%" /* Currently -375px */
})

Answered By - Feroz

Answer Checked By - Clifford M. (PHPFixing Volunteer)