jinsi ya Kutengeneza Navigation Menu Nzuri Yenye Toggle Button (Mobile Friendly)

Jifunze kutengeneza navigation bar (menu) simple, modern na responsive yenye toggle button nzuri kwa simu. Hii design ni rahisi kubadilisha rangi na muundo popote unapohitaji.

📌 Utangulizi

Navigation menu nzuri huifanya website yako ionekane professional na rahisi kutumia. Watu wengi hutumia simu, hivyo nav bar yenye toggle button ni muhimu sana kwa UI/UX.

Leo nakupa code rahisi ambayo unaweza kubadilisha rangi, fonts, structure na animation kwa urahisi.

💻 HTML + CSS + JS (Copy & Paste Ready)
📌 HTML
<nav class="navbar">
<div class="logo">Faulink</div>

<button class="menu-btn" id="menu-btn">
<i class="fas fa-bars"></i>
</button>

<ul class="menu" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

📌 CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
}

.navbar {
background: #007bff;
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar .logo {
font-size: 20px;
font-weight: bold;
}

.menu {
list-style: none;
display: flex;
gap: 20px;
}

.menu li a {
color: white;
text-decoration: none;
font-size: 16px;
transition: .3s;
}

.menu li a:hover {
color: #ffd700;
}

/* Mobile Menu */
.menu-btn {
background: none;
border: none;
color: white;
font-size: 25px;
display: none;
}

@media (max-width: 768px) {
.menu {
display: none;
position: absolute;
top: 65px;
right: 20px;
background: #007bff;
width: 200px;
padding: 15px;
border-radius: 10px;
flex-direction: column;
gap: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.menu.show {
display: flex;
animation: fadeIn .3s ease;
}

.menu-btn {
display: block;
cursor: pointer;
}
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}

📌 JavaScript (Toggle Button)
<script>
const btn = document.getElementById("menu-btn");
const menu = document.getElementById("menu");

btn.addEventListener("click", () => {
menu.classList.toggle("show");
});
</script>

📌 Faida za Navigation Hii

✔️ Ina toggle button (hamburger icon)
✔️ Menu inakuja na animation ya fade in
✔️ Rahisi kubadilisha rangi (badilisha #007bff tu)
✔️ Perfect kwa dashboard, blog, school system, eCommerce
✔️ Responsive kabisa kwenye simu

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509