<div class="navbar-demo">
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<a href="#" onclick="return false;">Brand</a>
</div>
<ul class="nav-menu" id="navMenu">
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">Contact</a>
</li>
</ul>
<div class="nav-toggle" id="mobileMenu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Demo content to show navbar behavior -->
<div class="demo-content">
<h2>Responsive Navigation Demo</h2>
<p>Click the hamburger menu (β°) in the top right to test the mobile menu functionality.</p>
<p>The menu works on both desktop and mobile for demonstration purposes.</p>
<p>Try clicking the menu items to see the interactive feedback!</p>
</div>
</div>
.navbar-demo {
position: relative;
height: 250px;
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
border-radius: 15px;
overflow: hidden;
}
.navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
.nav-logo a {
font-size: 1.8rem;
font-weight: 700;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-logo a:hover {
transform: scale(1.05);
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}
.nav-item {
margin-left: 2rem;
}
.nav-link {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
padding: 8px 16px;
border-radius: 25px;
}
.nav-link:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transform: translateY(-2px);
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 2px;
left: 50%;
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
transform: translateX(-50%);
border-radius: 2px;
}
.nav-link:hover::after {
width: 80%;
}
.nav-toggle {
display: flex;
flex-direction: column;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
.bar {
width: 25px;
height: 3px;
background-color: white;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 2px;
}
.demo-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #333;
padding: 20px;
}
.demo-content h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 15px 0;
color: #667eea;
}
.demo-content p {
margin: 8px 0;
color: #666;
font-size: 14px;
line-height: 1.5;
}
/* Mobile Styles */
@media screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 100%;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 2rem 0;
backdrop-filter: blur(10px);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 0.5rem 0;
}
.nav-link {
display: block;
padding: 12px 20px;
margin: 0 20px;
border-radius: 10px;
font-size: 18px;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(5px);
}
.nav-toggle {
display: flex;
}
.nav-toggle.active .bar:nth-child(2) {
opacity: 0;
transform: translateX(20px);
}
.nav-toggle.active .bar:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.nav-toggle.active .bar:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
.demo-content h2 {
font-size: 1.3rem;
}
.demo-content p {
font-size: 13px;
}
}
/* Animation for menu items */
.nav-menu.active .nav-item {
animation: slideInFromRight 0.3s ease forwards;
}
.nav-menu.active .nav-item:nth-child(1) { animation-delay: 0.1s; }
.nav-menu.active .nav-item:nth-child(2) { animation-delay: 0.2s; }
.nav-menu.active .nav-item:nth-child(3) { animation-delay: 0.3s; }
.nav-menu.active .nav-item:nth-child(4) { animation-delay: 0.4s; }
.nav-menu.active .nav-item:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
console.log('π Starting navbar script...');
// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
console.log('β
DOM loaded, initializing navbar...');
const mobileMenu = document.getElementById('mobileMenu');
const navMenu = document.getElementById('navMenu');
const navLinks = document.querySelectorAll('.nav-link');
console.log('π Elements found:', {
mobileMenu: !!mobileMenu,
navMenu: !!navMenu,
navLinksCount: navLinks.length
});
// Toggle mobile menu
if (mobileMenu && navMenu) {
mobileMenu.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('π Hamburger menu clicked!');
const isActive = navMenu.classList.contains('active');
if (isActive) {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
console.log('π± Menu closed');
showFeedback('Menu closed');
} else {
mobileMenu.classList.add('active');
navMenu.classList.add('active');
console.log('π± Menu opened');
showFeedback('Menu opened - try clicking a link!');
}
});
console.log('β
Hamburger menu event listener added');
} else {
console.error('β Required elements not found!', { mobileMenu, navMenu });
}
// Handle nav link clicks
navLinks.forEach((link, index) => {
link.addEventListener('click', function(e) {
e.preventDefault();
const linkText = this.textContent.trim();
console.log(`π Nav link clicked: "${linkText}"`);
// Visual feedback
this.style.transform = 'scale(0.95)';
this.style.background = 'rgba(255, 255, 255, 0.3)';
setTimeout(() => {
this.style.transform = '';
this.style.background = '';
}, 200);
// Close menu if open
if (navMenu && navMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
console.log('π± Menu closed after link click');
}
// Show feedback
showFeedback(`Clicked: ${linkText}`);
});
});
console.log(`β
Added click listeners to ${navLinks.length} nav links`);
// Close menu when clicking outside
document.addEventListener('click', function(event) {
if (!mobileMenu || !navMenu) return;
const clickedInsideNav = event.target.closest('.navbar');
if (!clickedInsideNav && navMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
console.log('π± Menu closed by outside click');
showFeedback('Menu closed');
}
});
// Handle escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && navMenu && navMenu.classList.contains('active')) {
mobileMenu.classList.remove('active');
navMenu.classList.remove('active');
console.log('π± Menu closed by ESC key');
showFeedback('Menu closed');
}
});
// Feedback function
function showFeedback(message) {
console.log('π¬ Showing feedback:', message);
// Remove existing feedback
const existing = document.querySelector('.demo-feedback');
if (existing) existing.remove();
// Create feedback
const feedback = document.createElement('div');
feedback.className = 'demo-feedback';
feedback.textContent = message;
feedback.style.cssText = `
position: fixed;
top: 80px;
right: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
z-index: 10001;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transform: translateX(100%);
transition: transform 0.3s ease;
max-width: 200px;
text-align: center;
`;
document.body.appendChild(feedback);
// Animate in
requestAnimationFrame(() => {
feedback.style.transform = 'translateX(0)';
});
// Remove after 2.5 seconds
setTimeout(() => {
feedback.style.transform = 'translateX(100%)';
setTimeout(() => {
if (feedback.parentNode) {
feedback.remove();
}
}, 300);
}, 2500);
}
console.log('π Navbar initialization complete!');
// Test the menu after a short delay
setTimeout(() => {
if (mobileMenu) {
console.log('π§ͺ Menu is ready for testing! Click the hamburger icon (β°)');
showFeedback('Click the β° menu to test!');
}
}, 1000);
});