DEV Community

Cover image for Creating A NavBar drawer with HTML/CSS.
Sulaimon Olaniran
Sulaimon Olaniran

Posted on

Creating A NavBar drawer with HTML/CSS.

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,

index.html
index.css
index.js
Enter fullscreen mode Exit fullscreen mode

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

<!--creating the button to handle opening the navbar-->
<nav>
   <span onclick="openNav()" class="mobile-nav-open-icon">&#9776</span>
</nav>

<!-- this would work as the backdrop when navbar is open-->
<div class="backdrop-container" id="backdrop"></div>

<!--the would be the drawer and it's content-->
  <div id="mySidenav" class="sidenav-container">

  <span class="drawer-close-button">
<!--icon for closing of the navbar-->
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </span>
<!--Each links on the navbar-->
  <a href="#home" onclick="closeNav()" id="home-link">Home</a>
  <a href="#about" onclick="closeNav()" id="about-link">About Me</a>
  <a href="#works" onclick="closeNav()" id="works-link">My WorkS</a>
  <a href="#contact" onclick="closeNav()" id="contact-link">Contact Me</a>

</div>
Enter fullscreen mode Exit fullscreen mode

Now that's all for the HTML file, next is the CSS file;

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;
}
Enter fullscreen mode Exit fullscreen mode

Please do note that you can write your HTML code as you wish to design your app and also style it with different CSS styles, I'm only you these styles which had worked for me, but be creative and create what best suites your app design.

That's all for the CSS, now its time for the five lines of JavaScript codes;

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"
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

Collapse
perpetual_education profile image
perpetual . education

Cool explorations! Over the years, we've built these so many ways!!! It's crazy. You can even use a checkbox now - and skip the JavaScript completely - but on the subject of JavaScript: check out this approach

With this style of "event delegation" (having one listener and then doing different stuff depending on what is clicked) - you can really simplify the whole thing. What do you think?

Collapse
perpetual_education profile image
perpetual . education

Here's a more fleshed out example too. : )

Collapse
giologist profile image
Gio

If you're looking for an HTML+CSS only solution check out the "Checkbox Hack":
css-tricks.com/the-checkbox-hack/

Definitely a go-to-favorite for none javascript implementations.

Collapse
najmulnazu profile image
Najmul Hossain

Wow, nice tutorial. Thank you.

Collapse
rcrohan profile image
Rohan

Nice Method I used to do using HTML and CSS using checkbox