Sometimes the website menu, that covers all screen is good. I did it once, but it’s taken me some time, to discover how to do that. Another case, from web developer road, from the category: easy to imagine, more difficult to code. In this post, I share with you some tricks to do that on your webpage.
When your daughter asks you to build a website.
First of all, a small intro 🙂 Well, my daughter asks me to build a website for her. No problem, I learn coding to make this kind of wish. I fired up AdobeXD and we started to build a project. When we finished it was clear, that menu should cover all screen. This is no big deal because in CSS we have cool property names “opacity”. But if the menu doesn’t appear, that is no equal that the user can’t click in the menu bar. What a pity. I had to find another way to show and hide the menu.
Testing different web development strategy
So I figured out that I can use transformation, and push div with menu bar out of the screen. Practically out of the page wrapper div. And I did so. Unfortunately, this also generates some problems on the big screen especially. Your menu is out of the page wrapper div, but on the big screen, this is still could be a clickable element in the web browser window. I need something different, and definitely, this should work fine on all screens.
I thought: what if I set the width of the menu div to zero? BINGO this is an extra cool thing. When I want the menu to disappear, then I set it to position fixed, top: 0; right: 0, overflow: hidden and the most important – width: 0. Just like in the image below. Works perfectly, and you still can make some animation on this element 🙂
Another trick to hide the menu on the website.
Ok, but is there any other way to make the menu disappear? Yes, it is. It all depends on what you want to achieve. There is no universal method when I writing this post, so You need to think about your goal. Perhaps, you won’t just hide the menu or some other element and you don’t need the animation to display it when the user clicks something. CSS also has a good property for this, called display: none.
When you set this property, the HTML element will be ignored by the browser. Cool, nothing will load to the browser screen, so users don’t click on hidden links or buttons. The same situation with visibility properties. But there is a small difference between display and visibility. When you use visibility: hidden element will be generated by the browser, but users couldn’t see it and interact with it. These is also great property when you need to keep page structure and display properties will collapse it.
Use the right tools to get the perfect effect on your website.
Summary there are several ways to hide something on a web page, using css. Each of these methods can be used, but all depended on your goal. Sometimes it’s better to move the element out of the page wrapper box, sometimes hide it completely, sometimes hide it but reserved place for this element on the page. For sure you can also use Java Script to achieve your goal and some other CSS properties. Build web site is so interesting, and CSS and Java Scripts give as a lot of tools to build beautiful and engaging page.
If you know some other ways to hide something on the web page please, share with other by leaving a comment on this post.