animated-side-navigation-html-css-javascript

Responsive Side Navigation Bar Design | HTML, CSS And JavaScript

"Responsive Side Navigation Bar" is a very cool and important element of our website. A responsive navigation bar is a design that enables the user to scroll through and explore the content on a website without disturbing the content and interface of the website.

As the navigation bar is an element of the website that contains our product, service and other useful links which are very important for users. It is important to note that a navigation bar must be responsive for a good user experience and simple so that easy to use for new users, this can be done with the help of html, css and a few lines of javascript.

The focus of this article is to teach you how to create a responsive navigation bar. This Navigation bar is a vertical bar of links to a website's sections. It is typically placed at the top left of a webpage. The navigation bar typically includes so many links and each link can have a sub-menu also but here we are just focusing on the side navigation bar with a responsive design.

We can say that the navigation bar plays a very important role on the website so it should be more attractive and well-designed. A good navigation bar design provides a smooth and reliable user experience. And because of that more users will spend more time on the website and this is good for a website. So let's get started without further ado.

For more navigation concepts you can follow the navbar playlist.

You can learn more about web development from this playlist.

01. HTML
02. CSS
03. Script
04. Output
05. Youtube Video
06. Source Code

HTML:

Before starting to write the code for the navigation bar, we need to create a basic structure of an HTML document that is known is boilerplate, so that the browser can understand the document type and may start some pre-processes. The basic html boilerplate looks as below.

<!DOCTYPE html>
<html>
<head>
  <title>Document Title</title>
  <style>
  </style>
</head>

<body> 
 Content of the document.

<script type="text/javascript">
</script>

</body>
</html>

After writing the basic structure of an html document, we can also write the necessary tags and content for the web page. After that, run this code on the browser and see the output. As we know that html only shows the content in the basic format, it does not beautify that content. We need CSS to beautify web page content, which is inserted into an html document and creates an attractive user interface.

<!DOCTYPE html>
<html>
   <head>
      <title>Responsive Side Navigation Bar Design | Rustcode</title>
      <style>
      </style>
   </head>
   <body>
      <div id="mainbox" onclick="openFunction()">&#9776; Open</div>
      <div id="menu" class="sidemenu">
         <a href="#">Home</a>
         <a href="#">About</a>
         <a href="#">Contact</a>
         <a href="#">Login</a>
         <a href="#" class="closebtn" onclick="closeFunction()">&times;</a>
      </div>
      <script type="text/javascript"></script>
   </body>
</html>

Read Also:

CSS:

body {
   font-family: sans-serif;
   margin: 20px 40px;
}

#mainbox {
   font-size: 24px;
   cursor: pointer;
   transition: all .6s;
}

.sidemenu {
   position: fixed;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 0px;
   background-color: #222;
   z-index: 1;
   padding-top: 100px;
   overflow-x: hidden;
   transition: all .5s;
}

.sidemenu a {
   padding: 8px 8px 8px 64px;
   text-decoration: none;
   font-size: 20px;
   color: #999;
   display: block;
}

.sidemenu a:hover {
   color: white;
}

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

Read Also:

SCRIPT:

<script type="text/javascript">
 function openFunction(){
  document.getElementById("menu").style.width="300px";
  document.getElementById("mainbox").style.marginLeft="300px";
  document.getElementById("mainbox").innerHTML="Click on Cross Element and Close Menu";
 }
function closeFunction(){
 document.getElementById("menu").style.width="0px";
 document.getElementById("mainbox").style.marginLeft="0px";
 document.getElementById("mainbox").innerHTML="&#9776; Open";
}
</script>

Output:

animated-side-navigation-html-css-javascript-demo

Read Also:

Youtube Video:

We also made a youtube video for "Responsive Side Navigation Bar Design | HTML, CSS And JavaScript", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also: