Some new front_developers find it difficult to create navigation bar drawer, I had same issue when trying to build a mobile friendly app, I always just squeezed the links to fit the mobile pixels.
Recently I discovered it was pretty easy to create a navigation bar drawer with just HTML and CSS and very little JavaScript. Yes, JavaScript, don’t freak out just yet if you have no knowledge of JavaScript, you can simply just copy the five lines of codes for now and make your app beautiful, I promise you later on you’d realize the five lines of code was really nothing difficult, let’s dive in.
Initially we’d need to create 3 files,
1 | index.html |
You can name the file’s what ever you want or you’re comfortable with, but for this post we’d be going with those three.
Starting with the HTML file
1 | <!--creating the button to handle opening the navbar--> |
nav{
width: 100%;
height: 10vh;
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
top: 0;
left: 0;
background-color: white;
z-index: 1;
}
.mobile-nav-open-icon{
font-size: 2rem;
cursor: pointer;
margin-right: 2rem;
color: black;
margin-left:3rem;
}
.backdrop-container{
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}
.sidenav-container {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidenav-container a {
text-decoration: none;
font-size: 1rem;
color: #818181;
display: block;
transition: 0.3s;
margin: 10px 0;
}
.sidenav-container a:hover {
color: #f1f1f1;
}
.sidenav-container .closebtn {
font-size: 3rem;
font-weight: 700;
color:#C9002B ;
padding-right: 1rem;
}
.sidenav-container .drawer-close-button{
height: 3rem;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 3rem;
}
1 |
|
function openNav() {
//opens side navbar by 70 percent
document.getElementById("mySidenav").style.width = "70%"
//opens overlay display
document.getElementById('backdrop').style.display = "block"
}
function closeNav() {
//closes side navbar totally
document.getElementById("mySidenav").style.width = "0"
//removes overlay display
document.getElementById('backdrop').style.display = "none"
}
`
And that’s all, you should have a fully functioning navigation side bar by now.
You can follow this link : http://codepen.io/Sulaimon-Olaniran/pen/OJMdvxM to see it live on Codepen.