Default Navbar with Toggle Menu

Enhance website navigation with a default navbar featuring a toggle menu. Learn how to create a user-friendly navigation bar that collapses into a toggle menu for improved usability on smaller screens

Create a default navbar with a toggle menu for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a responsive navigation bar, ensuring it provides an intuitive user experience on both desktop and mobile devices.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the default navbar with toggle menu. This snippet includes the foundational structure, styles, and basic functionality needed to create a responsive navbar. Select the code, click the copy button, and paste it into your HTML file where you want the navbar to appear.

Step 2: Link CSS, Material Icons, and JavaScript Files

  • Ensure the necessary CSS, Material Icons, and JavaScript files are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and Material Icons:
  • <link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  • Include the following <script> tag at the end of your <body> section to import the JavaScript file:
  • <script src="script.js"></script>
  • Replace "styles.css" and "script.js" with the actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

  • Personalize the navbar and toggle menu to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the navbar's appearance, menu items, and interaction behaviors. Experiment with different styles, icons, and responsive design techniques to create a seamless and engaging navigation experience.

By following these steps, you can implement and customize a default navbar with a toggle menu on your website using HTML, CSS, and JavaScript. Make the navbar component your own by adjusting styles, adding custom icons, and enhancing the toggle menu functionality to create a user-friendly navigation experience across all devices.

Code Explanation

HTML Code

Main Navigation Container (<nav class="navbar">):
  • This is the main container for the navbar.
Navbar Overlay (<div class="navbar-overlay" onclick="toggleMenuOpen()"></div>):
  • This div element serves as an overlay covering the entire viewport.
  • It has an onclick attribute set to toggleMenuOpen(), indicating that when clicked, it will trigger the toggleMenuOpen JavaScript function.
  • Typically, this overlay is used to close any open menus or modal dialogs when clicked outside of them.
Navbar Burger Button (<button type="button" class="navbar-burger" onclick="toggleMenuOpen()">):
  • This is a button element styled as a burger menu icon (often represented by three horizontal lines).
  • It has an onclick attribute set to toggleMenuOpen(), indicating that when clicked, it will trigger the toggleMenuOpen JavaScript function.
  • Inside the button, there is a <span class="material-icons">menu</span> which displays an icon indicating a menu. The specific icon shown here is from Google's Material Icons library.
Navbar Title (<h1 class="navbar-title">Awards</h1>):
  • This h1 element displays the title "Awards" within the navbar.
  • It serves as a label or heading for the current page or section.
Navbar Menu (<nav class="navbar-menu">):
  • This nav element contains a list of navigation items or links within the navbar.
  • Inside it, there are three button elements:
    • The first button (<button type="button">Skills</button>) presumably links to a section related to skills.
    • The second button (<button type="button" class="active">Awards</button>) is marked with the active class, indicating it represents the current active section or page within the navbar.
    • The third button (<button type="button">Projects</button>) presumably links to a section related to projects.

CSS Code

Universal Box Sizing
* {
  box-sizing: border-box;
}
  • This sets box-sizing: border-box for all elements, ensuring padding and border are included in the element's total width and height.
Body Styles
body {
  background: #3b3d43;
}
  • Sets the background color of the body element to a dark gray (#3b3d43).
Button Reset
button {
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
  • Resets styles for button elements to remove borders and padding, inherit font family and color, set a transparent background, and use a pointer cursor.
.navbar Styles
.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  background: #19191c;
  color: #f9f9f9;
  font-family: "Poppins";
  box-sizing: border-box;
}
  • Styles for the .navbar which is fixed at the top of the viewport:
    • Centered content (justify-content: center)
    • Dark background (#19191c) and light text (#f9f9f9)
    • Uses the "Poppins" font
    • Initially, it spans the full width, with a height of 64px
Media Query for .navbar
@media only screen and (min-width: 600px) {
  .navbar {
    justify-content: space-between;
    padding: 0 0 0 16px;
  }
}

For screens wider than 600px:

  • Changes .navbar to justify-content: space-between (to push items to the edges)
  • Adds left padding of 16px
.navbar-overlay Styles
.navbar-overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}

Styles for an overlay that covers the screen when the navigation menu is opened:

  • Semi-transparent black background (rgba(0, 0, 0, 0.5))
  • Initially hidden (visibility: hidden) with no opacity (opacity: 0)
  • Smooth transition effect (transition: 0.3s)
.navbar-overlay Visibility
body.open .navbar-overlay {
  visibility: visible;
  opacity: 1;
}
  • When the .navbar-overlay is shown (body has class open), it becomes visible with full opacity.
Media Query for .navbar-overlay
@media only screen and (min-width: 600px) {
  .navbar-overlay {
    display: none;
  }
}
  • For screens wider than 600px, the .navbar-overlay is hidden (display: none).
.navbar-burger Styles
.navbar-burger {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
}

Styles for a burger menu icon:

  • Positioned at the top left corner of .navbar
  • Uses CSS grid for centering
  • Fixed size of 64x64 pixels
Media Query for .navbar-burger
@media only screen and (min-width: 600px) {
  .navbar-burger {
    display: none;
  }
}
  • For screens wider than 600px, the burger menu icon is hidden (display: none).
.navbar-menu Styles
.navbar-menu {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  transform: translate(-100%, 0);
  width: 270px;
  height: 100%;
  padding: 20px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: flex-start;
  background: #000000;
  visibility: hidden;
  transition: transform 0.3s;
}

Styles for the navigation menu:

  • Fixed position at the top left of the viewport
  • Initially off-screen to the left (transform: translate(-100%, 0))
  • Width of 270px, full height of the viewport
  • Black background (#000000) with hidden visibility (visibility: hidden)
  • Flex container with column layout for menu items
.navbar-menu Visibility
body.open .navbar-menu {
  transform: translate(0, 0);
  visibility: visible;
}

When the menu is opened (body has class open):

  • Moves the menu into view (transform: translate(0, 0))
  • Makes it visible (visibility: visible)
Media Query for .navbar-menu
@media only screen and (min-width: 600px) {
  .navbar-menu {
    position: static;
    transform: none;
    width: auto;
    background: transparent;
    flex-direction: row;
    visibility: visible;
  }
}

For screens wider than 600px:

  • Changes .navbar-menu to static positioning
  • Resets transform and width to auto
  • Transparent background
  • Switches to row layout for menu items (flex-direction: row)
  • Makes the menu visible (visibility: visible)
.navbar-menu > button Styles
.navbar-menu > button {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  padding: 0 8px;
}

Styles for buttons inside .navbar-menu:

  • Light gray text (rgba(255, 255, 255, 0.5))
  • Transparent background
  • Horizontal padding of 8px
.navbar-menu > button.active Styles
.navbar-menu > button.active {
  color: inherit;
}

Styles for active buttons inside .navbar-menu:

  • Inherits text color to match parent element's text color.

JavaScript Code

Function Declaration:
const toggleMenuOpen = () => {
  // Function body
};
  • const toggleMenuOpen declares a constant named toggleMenuOpen, which is a function.
  • () => { ... } is an arrow function syntax used to define the function.
Function Body:
document.body.classList.toggle("open");
  • document.body refers to the <body> element of the HTML document.
  • .classList returns the DOMTokenList of the <body> element, representing its classes.
  • .toggle("open") is a method of classList that toggles the presence of the class "open" on the <body> element.