Full blog post here: Navigation Bar HTML
In this blog post, we are going to create a fancy navigation bar using HTML, CSS, and Javascript.
This navigation menu would be not just a regular navbar, but, a full-screen overlay navigation menu.
This will be a responsive navigation bar menu that will be responsive for both mobile and desktop displays.
It will be really fun to code this and navigation bars like these create an amazing impression of your website in the user's head.
Benefits of Full Screen Navigation Bar Menu
Well, you can have a navigation bar that is right at the top of the website. So what does this full-screen overlay navigation achieve?
As a pro, you get a consistent view between your mobile and your desktop.
Users are able to interact with your responsive mobile website and desktop site in the same way.
Also, you get a lot of free space on the top of the websites which makes your website a little different from other websites out there.
Create A Full-Screen Navigation Bar Menu
To begin with, we will create three files in our code editor:
- index.html file
- style.css file
- script.js file
After these, we will create a basic HTML structure using the Emmet extension for visual studio and will link our CSS and Script file.
Adding HTML Elements For Navigation Bar
Now, to the HTML structure, we will add a few HTML elements and create our header and our Navigation bar.
This is what the HTML code looks like:
Adding Styles To Our Navigation Menu HTML Elements
Now, it's time to style our header and nav elements and create a fancy full-screen overlay navigation menu.
The CSS will look like this
The result of the above HTML and CSS is that we have a top website header and a navigation menu. But the nav is not an overlay as we want at the moment.
Now we will add some more CSS to make it an overlay.
These three CSS properties make our nav a perfect overlay.
Now we have to make use of some Javascript to make the navigation menu hide and show.
The Javascript is very simple, we are just toggling a class that hides or shows the menu.
Top comments (1)
May i know how you place those close button, because there is no button with open-nav id or close-nav in the html, or it is just me that not understanding your code