Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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 */
})
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading