Responsive Navigation Bar

Below is a complete implementation of a responsive navigation bar that collapses into a hamburger menu on screens smaller than 600px. This solution uses **HTML**, **CSS**, and **vanilla JavaScript** without any external libraries. --- ### 1. HTML Structure The HTML structure includes a `

` element containing: - A **logo** (for demonstration purposes, it's a simple text). - An **unordered list (`

` element wraps the entire navigation bar. - `.logo` displays the website's logo or name. - `.nav-links` contains the list of navigation links. - `.hamburger` is the button that toggles the visibility of the navigation links on smaller screens. --- ### 2. CSS Styling (`styles.css`) The CSS handles the styling and responsiveness of the navigation bar. ```css /* Reset some default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } /* Navbar styling */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 10px 20px; position: relative; } /* Logo styling */ .logo { color: #fff; font-size: 1.5em; text-decoration: none; } /* Navigation links styling */ .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 20px; } .nav-links a { color: #fff; text-decoration: none; font-size: 1em; transition: color 0.3s ease; } .nav-links a:hover { color: #ddd; } /* Hamburger button styling */ .hamburger { display: none; flex-direction: column; cursor: pointer; } .hamburger .bar { height: 3px; width: 25px; background-color: #fff; margin: 4px 0; transition: all 0.3s ease; } /* Responsive styling */ @media (max-width: 600px) { /* Hide navigation links on mobile */ .nav-links { position: absolute; top: 60px; /* Height of the navbar */ left: -100%; flex-direction: column; background-color: #333; width: 100%; transition: left 0.3s ease; } /* Show navigation links when active */ .nav-links.active { left: 0; } /* Display hamburger on mobile */ .hamburger { display: flex; } /* Adjust spacing for links */ .nav-links li { margin: 15px 0; text-align: center; } } ``` **Explanation:** - **Reset Styles:** Basic reset for margins, paddings, and box-sizing. - **Navbar Layout:** Uses Flexbox to align items horizontally and space them out. - **Navigation Links:** Displayed as a horizontal list on desktop. - **Hamburger Button:** Hidden by default on desktop and shown on screens smaller than 600px. - **Responsive Behavior:** - On screens `<600px`, the navigation links are positioned off-screen (`left: -100%`) and become visible when the `.active` class is added. - The hamburger button is displayed, and the navigation links transition in and out smoothly. --- ### 3. JavaScript Behavior (`script.js`) The JavaScript handles the toggling of the navigation links when the hamburger button is clicked. ```javascript // Wait for the DOM to load document.addEventListener('DOMContentLoaded', () => { // Select the hamburger button and the navigation links const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); // Add a click event listener to the hamburger button hamburger.addEventListener('click', () => { // Toggle the 'active' class on the navigation links navLinks.classList.toggle('active'); // Optional: Animate the hamburger bars (not required) hamburger.classList.toggle('active'); }); }); ``` **Explanation:** - **Event Listener:** Waits for the DOM to fully load before executing the script. - **Selectors:** Grabs the hamburger button and the navigation links. - **Toggle Functionality:** When the hamburger is clicked, the `.active` class is toggled on the `.nav-links` element. - When `.active` is added, the navigation links slide in from the left. - When removed, they slide out. **Optional Enhancement:** If you want to animate the hamburger button (e.g., changing the bars into an "X" when active), you can add the following CSS and adjust the JavaScript accordingly. **Additional CSS for Hamburger Animation:** ```css /* When the hamburger is active, transform the bars into an 'X' */ .hamburger.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } ``` **Updated JavaScript:** ```javascript // Wait for the DOM to load document.addEventListener('DOMContentLoaded', () => { // Select the hamburger button and the navigation links const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); // Add a click event listener to the hamburger button hamburger.addEventListener('click', () => { // Toggle the 'active' class on the navigation links and the hamburger navLinks.classList.toggle('active'); hamburger.classList.toggle('active'); }); }); ``` --- ### 4. Final Result With the above code, your navigation bar will behave as follows: - **Desktop View (≥600px):** - The logo and navigation links are displayed horizontally. - The hamburger button is hidden. - **Mobile View (<600px):** - The logo is displayed. - The navigation links are hidden. - The hamburger button is shown. - Clicking the hamburger button slides the navigation links into view. - Clicking the hamburger button again hides the navigation links. --- ### 5. Live Example For a quick demonstration, you can copy the following code into your local development environment or use an online editor like [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). **HTML (`index.html`):** ```html Responsive Navigation Bar ``` **CSS (`styles.css`):** ```css /* Reset some default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } /* Navbar styling */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 10px 20px; position: relative; } /* Logo styling */ .logo { color: #fff; font-size: 1.5em; text-decoration: none; } /* Navigation links styling */ .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 20px; } .nav-links a { color: #fff; text-decoration: none; font-size: 1em; transition: color 0.3s ease; } .nav-links a:hover { color: #ddd; } /* Hamburger button styling */ .hamburger { display: none; flex-direction: column; cursor: pointer; } .hamburger .bar { height: 3px; width: 25px; background-color: #fff; margin: 4px 0; transition: all 0.3s ease; } /* Responsive styling */ @media (max-width: 600px) { /* Hide navigation links on mobile */ .nav-links { position: absolute; top: 60px; /* Height of the navbar */ left: -100%; flex-direction: column; background-color: #333; width: 100%; transition: left 0.3s ease; } /* Show navigation links when active */ .nav-links.active { left: 0; } /* Display hamburger on mobile */ .hamburger { display: flex; } /* Adjust spacing for links */ .nav-links li { margin: 15px 0; text-align: center; } } /* Hamburger animation when active */ .hamburger.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } ``` **JavaScript (`script.js`):** ```javascript // Wait for the DOM to load document.addEventListener('DOMContentLoaded', () => { // Select the hamburger button and the navigation links const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); // Add a click event listener to the hamburger button hamburger.addEventListener('click', () => { // Toggle the 'active' class on the navigation links and the hamburger navLinks.classList.toggle('active'); hamburger.classList.toggle('active'); }); }); ``` --- ### 6. Additional Tips - **Accessibility:** Ensure that the hamburger button has an `aria-label` for accessibility purposes. - **Animations:** You can enhance the user experience by adding CSS transitions or animations to the navigation links and the hamburger button. - **JavaScript Enhancements:** For more complex behavior, consider debouncing the resize event or handling touch events for mobile devices. - **Performance:** For larger projects, consider using CSS preprocessors like SASS or frameworks like Bootstrap for more advanced styling and responsiveness. --- This implementation provides a clean, responsive navigation bar that adapts to different screen sizes, ensuring usability across devices. Feel free to customize the styles and functionality to better fit the needs of your project.

Responsive nav bar with hamburger menu (<600px)

Conversation

Responsive nav bar with hamburger menu (<600px)

openrouter/minimax-01

Performance Traces

Traces

No span selected