Hey Readers!

Navigation bars are an important part of a webpage. There is absolutely no webpage I have seen that would not be having a navigation menu. Navbar guides the user to the desired page. Positioning and adjusting the navbar is a work of common sense. Navbar can be set in different ways. You can apply your interactive thoughts and ideas to make the navbar look unique and appealing.

Navbars are generally fixed at the top (as seen in most webpages). I will be showing here a side navigation. There is a toggle button on the screen which when clicked, produces the navigation bar from the side of the page.

The code for the same is provided below.

HTML :

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

CSS :

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

This code will produce a toggle button at all screen sizes. When you click the button, the navigation menu will appear with 100% height and width as mentioned in the code. The navbar does not push the content of the page. It overlaps as it appears. That is, the content of the webpage will remain intact and unchanged as the navbar appears and disappears.

Happy Coding!