Module 51 : build a fully functional and responsive navigation bar (navbar) using HTML, CSS, and JavaScript.
1. What is a Responsive Navbar?
A responsive navbar adapts its design depending on the device's screen size:
On desktop, it shows the full menu horizontally.
On tablet or mobile, it collapses into a hamburger menu (three lines icon) that you can tap to open.
Why is it important?
Because more than 50% of web traffic is from mobile devices. A responsive navbar improves user experience and accessibility.
2. Technology Stack
We will use:
HTML5 for the structure
CSS3 for styling and responsiveness (with Media Queries)
Vanilla JavaScript for functionality (hamburger toggle)
3. Step-by-Step Method: Build a Responsive Navbar
Step 1: Create Basic HTML Structure
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </nav> <script src="script.js"></script> </body> </html>
Explanation:
<nav> = semantic tag for navigation bar.
.logo = your site's logo or name.
.nav-links = a list of links.
.hamburger = three bars (only show on mobile).
Step 2: Add CSS to Style and Make it Responsive
Create style.css file:
css
code
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #333; color: white; } .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 20px; } .nav-links a { text-decoration: none; color: white; font-size: 18px; } .hamburger { display: none; flex-direction: column; cursor: pointer; } .hamburger span { height: 3px; width: 25px; background: white; margin-bottom: 5px; border-radius: 5px; } /* Media Queries */ @media (max-width: 768px) { .nav-links { display: none; position: absolute; right: 0; top: 70px; background-color: #333; flex-direction: column; width: 100%; text-align: center; } .nav-links.active { display: flex; } .hamburger { display: flex; } }
Explanation:
Flexbox makes it easy to align logo left and links right.
.hamburger is hidden on desktop, shown on mobile.
Media Query @ 768px triggers when screen width is smaller (like a phone or tablet).
.active class toggles visibility of menu.
Step 3: Add JavaScript for Hamburger Toggle
Create script.js file:
javascript
code
const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', () => { navLinks.classList.toggle('active'); });
Explanation:
When the hamburger menu is clicked, it toggles the .active class on the menu (.nav-links).
This makes the menu appear or disappear on mobile.
4. Practical Exercises
Exercise 1: Customize the Navbar
Change the background color.
Add more links like "Portfolio" and "Blog."
Replace the logo text with an image (<img> tag).
Exercise 2: Make Smooth Animations
Use transition in CSS to animate the opening and closing of the menu.
css
code
.nav-links { transition: all 0.5s ease; }
Exercise 3: Highlight Active Links
Add a hover effect:
css
code
.nav-links a:hover { color: #FFD700; }
5. Goal: Build a Full Responsive Navbar with Dropdown Menu
Step 1: Add a dropdown inside the nav.
html
code
<li class="services"> <a href="#">Services ▼</a> <ul class="dropdown"> <li><a href="#">Web Design</a></li> <li><a href="#">App Development</a></li> <li><a href="#">SEO</a></li> </ul> </li>
Step 2: Add CSS to hide/show dropdown.
css
code
.services { position: relative; } .dropdown { display: none; position: absolute; background: #444; top: 40px; list-style: none; } .dropdown li { padding: 10px; } .services:hover .dropdown { display: block; }
Step 3: Make it Responsive
You can add media query rules so dropdowns behave nicely on mobile as well.
6. Final Notes
Always test your navbar on different devices (desktop, tablet, mobile).
Think about accessibility: add aria-labels and keyboard support for projects.
You can extend this by using libraries like Bootstrap later for faster development.
7. Full Example Files Structure
pgsql
code
project-folder/
├── index.html
├── style.css
└── script.js
No comments:
Post a Comment