In this article you’re about to read, I will show you some incredible steps on how you can easily create responsive sidebar navigation (Hamburger) with the use of HTML, CSS, and JavaScript.
INTRODUCTION
Sidebars are additional information placed to the right or left side of a webpage content area. They are used in displaying several or, let's say, more information for users, and this extra information may include navigation links to important pages of the website. Sidebars are equally known as features that show additional resources and unconventional opinions of a particular thing on a web page.
The horizontal display of the sidebar seems to be old-fashioned. Before the advent of the new design, these menus were built to display the sidebar horizontally, but now designers have ditched the horizontal nav bar to be used vertically using icons or some animation effects that allow it to be tweaked by the users.
WHAT IS HAMBUGER
In layman's terms, a hamburger can be described as a menu or an icon. These icons are mostly called buttons. The hamburger icon is used in mobile applications or on a website to open a side menu navigation. The Hamburger consist of different element called Menus which allows the user to make Navigation anywhere, it makes the Application more user-friendly, according to research the Hamburger has been in existence for long( —---) It was first designed by Norm Cox in the year 1981, he created it so that communication in terms of navigation is very easy but it wasn’t the choice of most developer until recently when UI/UX designers decided to integrate a number of icons into a button on Phone screens that it became more Popular, this is when the use of an Hamburger begin to spread and it became a Suitable choice of developers as the horizontal display of menu bar became Old Fashioned.
Advantages of using the Hamburger icon
One of the main reasons why we make use of The Hamburger is to make the navigation experience very easy and less choky on a website or an application. Secondly, the use of the Hamburger icon helps in screen spacing by hiding the navigation elements and their content. The hamburger icon is small and it displays the hidden element when clicked or tapped on. Thirdly, if you don't want to get users confused, every element or icon has an image. It would be very easy for users to navigate through their desired navigation options or a particular element through its image. So the Hamburger brings this great and unexplainable visual experience to every user.
Limitations of using the Hamburger icon
Although the disadvantages of the hamburger can never be compared with the awesomeness of the hamburger menu, as I have said earlier, the use of the hamburger helps the user experience to be easy and convenient. Below is what I see as the limitation. Different items that are being displayed as the menu are often classified into two, which are the primary menu and the secondary menu. Items that are hidden in the hamburger menu are sometimes categorized as secondary options by some users. This is because the user believes that since the menu is not easily accessible, that means the information in it is not important. The disadvantage the hamburger menu bar has is that it hides specific information, which makes users have difficulties navigating through your web application. For these reasons, it sometimes gets a very low click rate.
Let's get started…..
The Navigation Bar consists of logos and a list of links to the main pages of a web application. In a moment, I'll show you how to make a responsive navigation menu (hamburger) All you need is your desktop computer and the internet. The sidebar is usually displayed on screens that are wider than 990px and it would be hidden on small screens. Let's say when we open a website on our computer, it displays our logo and links to different pages on that website, but when we have a small screen like our mobile phones, the sidebars would be hidden inside a hamburger icon. When we click on the icon, it displays our sidebars and once we click again, our sidebar disappears.
(A Picture or short video of a hamburger * appears both on Computer and a mobile phone)
Here is how we structure our page with Html
We create a folder for our project, then we open our favorite text editor (visual studio code, sublime text, etc). Depending on individual preference, I prefer using the Vs code editor. I have my CSS properly linked. Then I added a couple of extensions to my folder (Font Awesome cdn). We then generate our html boilerplate (The boilerplate is just a template you need to add to your code editor at the commencement of your project. However, it is not compulsory to go with this technique. To generate your boilerplate, you type Doc and then press Tab on your Vs Code) Then I gave my project a title of CodeGuru. In the body section I added a header tag. The header tag comprises of a class attribute Nav-bar that births my logo and then a parent class attribute of Nav that consists of all my sidebars and then a div of class "bars".
See it yourself…
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
<title>CodeGuru</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="#" class="nav-coding">Code<span class="Guru">Guru</span></a>
<ul class="nav">
<li class="nav-items">
<a href="#" class="link">Home</a>
</li>
<li class="nav-items">
<a href="#" class="link">About</a>
</li>
<li class="nav-items">
<a href="#" class="link">Contact</a>
</li>
<li class="nav-items">
<a href="#" class="link">Resume</a>
</li>
</ul>
<div class="bar">
<i class="fa fa-bars"></i>
</div>
</div>
</header>
<script src="index.js"></script>
</body>
</html>
CSS
See it yourself………..
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
header{
background-color: #00008b;
}
li{
list-style:none;
font-size: 1.2rem;
}
a{
text-decoration: none;
color: #ffffff;
}
.Guru{
color: red;
}
.nav-bar{
display: flex;
min-height: 60px;
align-items: center;
justify-content: space-between;
padding: 0px 25px;
}
.nav{
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
gap: 55px;
}
.nav-coding{
font-size: 2rem;
}
.link{
transition: 0.8s;
}
.link:hover{
color: #f30707;
}
.bar, .fa-bars{
color: #ffffff;
display: none;
}
.bar, .fa-bars,.fa-times{
display: none;
}
.Menu-bar{
display: block;
height: 5px;
width: 25 px;
background-color: #ffffff;
-webkit-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-out;
margin: 5px auto;
}
@media(max-width:700px){
.bar, .fa-bars{
color: #ffffff;
display: block;
}
.nav{
display: block;
background-color: #00008b;
position: absolute;
right: 0;
top: -4;
margin-top: 10%;
padding: 1rem 4rem;
display: none;
}
.nav-items{
font-size: 20px;
}
.nav-items{
margin: 15px 0;
}
.fa-times{
display: none;
}
.active{
display: block;
}
}
JavaScript
With the use of Javascript, we'll be adding some functionalities to our hamburger icon. Firstly, you need to link your Javascript page with your html page. Then I called out two querySelectors (".bar" and ".nav" respectively) and then I added an event listener that when the Hamburger icon is clicked it should toggle, to switch state and display the bar menu.
See it yourself…
const bar = document.querySelector(".bar");
const nav= document.querySelector(".nav");
bar.addEventListener("click",() => {
bar.classList.toggle("active");
nav.classList.toggle("active");
})
document.querySelectorAll(".link").forEach(n => n.
addEventListener("click",() =>{
bar.classList.remove("active");
nav.classList.remove("active");
}))
CONCLUSION
Now that we have completed our hamburger menu, I hope you see the difference between the old-fashioned way of creating the menu bar and the latest design, which is the hamburger. I hope you like it. Stay tuned for more updates on Frontend Development.