✅ Responsive Navbar with HTML, CSS & JavaScript
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Responsive Navbar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
nav {
background-color: #2c3e50;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
flex-wrap: wrap;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
gap: 20px;
}
.menu a {
color: white;
text-decoration: none;
font-size: 16px;
}
.hamburger {
display: none;
font-size: 24px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
width: 100%;
background-color: #34495e;
margin-top: 10px;
}
.menu a {
padding: 10px;
border-top: 1px solid #2c3e50;
}
.menu.active {
display: flex;
}
.hamburger {
display: block;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">আমার সাইট</div>
<div class="hamburger" onclick="toggleMenu()">☰</div>
<div class="menu" id="nav-menu">
<a href="#">হোম</a>
<a href="#">আমাদের সম্পর্কে</a>
<a href="#">সেবা</a>
<a href="#">যোগাযোগ</a>
</div>
</nav>
<script>
function toggleMenu() {
const menu = document.getElementById('nav-menu');
menu.classList.toggle('active');
}
</script>
</body>
</html>
🔍 কী কী শিখলে এখানে:
| ফিচার | কাজ |
|---|---|
.hamburger | মোবাইলে ☰ আইকন দেখায় |
@media | ছোট স্ক্রিনে ডিজাইন বদলায় |
toggleMenu() | ক্লিক করলে মেনু খুলে/বন্ধ হয় |
menu.classList.toggle('active') | CSS ক্লাস দিয়ে মেনু দেখায় বা লুকায় |
0 Comments