Creating A NavBar drawer with HTML/CSS.

#html #css #javascript

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

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>

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;
}

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"
}

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.

Top comments (5)

perpetual . education • Jul 22 '20

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?