In this tutorial, we can use HTML,CSS and JavaScript. HTML: This provide the structure for navigation bar with a few main menu items and a dropdown submenu. CSS: Style the navigation bar to be responsive and visually appealing. JavaScript: Implement the functionality to toggle the dropdown menu on click or hover.
HTML Code:
<!DOCTYPE html> <html> <head> <title>Responsive Navbar</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <div class="logo">MySite</div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Services</a> <ul class="dropdown-content"> <li><a href="#">Web Development</a></li> <li><a href="#">SEO</a></li> <li><a href= "#">Marketing</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> <div class="hamburger" id="hamburger">☰</div> </nav> <script src="script.js"></script> </body> </html>
Let us go through each elemet to understand the concept.
- <nav class=”navbar”>: This is the container for the navigation bar. The Class=”navbar” is used to apply specific style define in CSS.
- <div class”logo”>MySite</div>: This section define the logo of the website.
- <ul class=”nav-links”>: This unorderlist contains the navigation links.Each links is a list item<li> with an anchor tag<a>.It will used for styling the links collectively.
- Dropdown Menu:
1. <li class=”dropdown”>: This list item act as a parent for the dropdown menu.
2.<a href=”#” class=”dropbtn”>Services</a>: This is the main link that triggers the dropdown.
3.<ul class=”dropdown-content”>: This nested unordered list contains the actual dropdown links. - Hamburger icon:
<div class=”hamburger” id=”hamburger”>☰</div>: This div contains the hamburger icon (☰ is the unicode for the “hamburger” menu symbol).CSS Code:
body{ font-family: Ariel, sans-serif; margin:0; padding:0; } .navbar{ background-color:#333; overflow:hidden; position:fixed; width:100%; top:0; } .navbar .logo{ display:inline-block; color: white; font-size: 24px; padding: 14px 20px; } .navbar .nav-link{ list-style: none; margin: 0; padding: 0; display: flex; float: right; } .navbar .navlink li { position: relative; } .navbar .nav-link li a { color:white; padding: 14px 20px; text-decoration:none; display: block; } .navbar .nav-link li a:hover{ background-color:#575757; } .navbar .dropdown .dropdown-content{ display;none; position:absolute; background-color:#333; min-width: 160px; z-index: 1; } .navbar .dropdown .dropdown-content li a{ padding: 10px 20px; } .navbar .dropdown:hover .dropdown-content{ display: block; } .hambuger{ display: none; font-size: 28px; color: white; padding: 14px 20px; cursor: pointer; float: right; } @media screen and (max-width: 768px){ .navbar .nav-links{ display:none; flex-direction: column; width: 100%; background-color: #333; } .navbar .nav-links li{ text-align: centre; } .navbar .nav-links.show{ display: flex; } .hamburger{ display: block; } }
Let us go through each element to understand the concept.
- General Styles:
- body: Sets global font family, removes margin and padding, and applies other default styling across the page.
- navabar: Style the navigatio bar, including background color, padding and positioning.
- Logo and Links:
- Logo: It ensure that logo is prominently displayed on the left side of the navbar.
- nav-links: Arranges the list of links horizontally using Flexbox.
- ‘a’ elements: Anchor tag are styled to look like buttons, with padding, background color on hover, and no text decoration.
- Dropdown Menu:
- dropdown-content: Initially hidden , positioned absolutely so it appears below the “service” button when shown. Styled with background color, padding and positionig to appear as a submenu.
- :hover pseudo-class: Trigger the visibility of the dropdown content when the user hover over the “services” link.
JavaScript Code:
document.getElemetById('hamburger').addEventListener('click',function(){ const navLinks = document.querySelector('.nav-links'); navlinks.classList.toggle('show'); });
Let us go through each concept to uderstand:
- Hamburger Menu Toggle:
- The script listens for a click event on the hamburger icon.
- When clicked, it toggles the visibility of the navigation link by adding and removing a class show .This is done using the classList.toggle(‘show’) method.
- querySelector(‘ .nav-links’): select the navigation links to toggle their visibility.
Output:
When you run this above code on your browser 1. on large screen, the navigation bar will display horizontally, with a dropdown menu appearing when you hover over"services". 2.On smaller screen like mobile, the navigation bar collapse into a hamburger menu. when clicked, the menu expands vertically, revealing the liks.