Skip to main content

Responsive Side Navigation Bar Design | HTML, CSS And JavaScript

responsive-side-navigation-bar-design-using-html-css-and-javascript

Responsive Side Navigation Bar Design Using HTML, CSS And JavaScript

"Responsive Side Navigation Bar" is an essential part of a website. It allows users to navigate through content smoothly without disrupting the website's layout and interface. The navigation bar contains important links, such as products, services, and other useful sections. For a great user experience, it should be simple, easy to use, and fully responsive. This can be achieved using HTML, CSS, and a few lines of JavaScript.

In this article, you'll learn how to create a responsive side navigation bar. It is a vertical menu, typically placed on the top left of a webpage. While navigation bars can include multiple links and sub-menus, we will focus on a simple and responsive side navigation bar.

A well-designed navigation bar enhances the user experience, making it easier for visitors to explore your website. A good design encourages users to stay longer, which benefits your website's engagement. Let's get started! For more navigation bar designs, check out the navbar playlist.

Table Of Contents

Read Also:

HTML:

Before writing the code for the navigation bar, we need to set up a basic HTML structure, known as a boilerplate. This ensures that the browser correctly interprets the document and performs necessary pre-processing. The basic HTML boilerplate is shown 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 creating the basic structure of an HTML document, we can add the necessary tags and content for the web page. Once done, we can run the code in a browser to see the output. Since HTML only structures the content without styling, we use CSS to enhance its appearance and create 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()">☰ 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()">×</a>
    </div>
    <script type="text/javascript"></script>
  </body>
</html>

Code Explanation

  • <!DOCTYPE html> - Declares the document type as HTML5.
  • <html> - The root element of the HTML document.
  • <head> - Contains metadata, including the title.
  • <title> - Sets the title of the document.
  • <style> - Placeholder for CSS styling.
  • <body> - Contains all the visible content.
  • <div id="mainbox"> - A button that triggers the navigation bar.
  • <div id="menu"> - The side navigation menu.
  • <a> - Navigation links inside the menu.
  • <script> - Placeholder for JavaScript functions to open and close the menu.

Output

html-code-output

Read Also:

CSS:

This CSS styles a sidebar navigation menu with smooth transitions.

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

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

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

/* Sidebar Links */
.sidemenu a {
  padding: 8px 8px 8px 64px;
  text-decoration: none;
  font-size: 20px;
  color: #999;
  display: block;
  transition: 0.3s;
}

/* Hover Effect */
.sidemenu a:hover {
  color: white;
}

/* Close Button */
.sidemenu .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 32px;
  color: white;
  cursor: pointer;
}

Code Explanation:

  • Sidebar Hidden by Default: The .sidemenu starts with width: 0, making it invisible initially.
  • Expanding Effect: When opened, JavaScript will modify the width to display it smoothly.
  • Link Styling: The .sidemenu a styles the navigation links.
  • Hover Effect: Changes text color to white when hovered.
  • Close Button: .closebtn is positioned inside the sidebar to close it.

Output

css-code-output

Read Also:

JavaScript:

This JavaScript controls the sidebar menu’s open and close functionality.

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 = "☰ Open";
}

Code Explanation:

  • Open Function: Expands the sidebar by setting width: 300px.
  • Margin Adjustment: Moves #mainbox to the right when the sidebar is open.
  • Close Function: Hides the sidebar by setting width: 0px.
  • Text Update: Changes button text based on sidebar state.

Output:

Clicking the button opens the sidebar, and clicking the close icon hides it.

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

Read Also:

Youtube Video

Watch our detailed YouTube tutorial on "Responsive Side Navigation Bar Design | HTML, CSS, and JavaScript". This step-by-step guide will help you understand the complete process of building this design.

We encourage you to write the code yourself before downloading the source files. This will enhance your learning experience. Once done, you can compare your code with the reference code.

Read Also:


Comments

Post a Comment