Cấu trúc của một Navigation Bar
Một navbar responsive điển hình gồm:
- Brand/Logo — tên hoặc logo bên trái
- Nav links — danh sách liên kết điều hướng
- Hamburger button — ẩn trên desktop, hiện trên mobile để toggle menu
Navbar ngang cơ bản (HTML + CSS)
Kết quả
<nav class="topnav">
<div class="brand">🌐 MySite</div>
<ul class="nav-links">
<li><a href="#" class="active">Trang chủ</a></li>
<li><a href="#">Về chúng tôi</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#" class="btn-cta">Liên hệ</a></li>
</ul>
</nav>
<main style="padding:1.5rem;font-family:sans-serif">
<h2>Nội dung trang</h2>
<p>Thanh điều hướng ở trên bám theo khi cuộn trang (sticky).</p>
</main>
* { box-sizing: border-box; margin: 0; padding: 0; }
.topnav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem;
background: #1a1a2e;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.brand {
color: white;
font-size: 1.1rem;
font-weight: bold;
font-family: sans-serif;
padding: 0.85rem 0;
}
.nav-links {
display: flex;
list-style: none;
gap: 0.25rem;
}
.nav-links a {
display: block;
padding: 0.85rem 0.9rem;
color: #ccc;
text-decoration: none;
font-family: sans-serif;
font-size: 0.9rem;
transition: color 0.2s, background 0.2s;
border-radius: 4px;
}
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(255,255,255,.1); }
.btn-cta { background: #4472c4 !important; color: white !important; border-radius: 6px !important; }
.btn-cta:hover { background: #2f5396 !important; }
Navbar với Hamburger menu (HTML + CSS + JS)
Kết quả
<nav class="mobile-nav">
<div class="nav-top">
<div class="nav-brand">🌐 MySite</div>
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
<ul class="mobile-links" id="mobileLinks">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Về chúng tôi</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
<div style="padding:1rem;font-family:sans-serif;color:#555">
↑ Nhấn nút ☰ để mở/đóng menu
</div>
* { box-sizing: border-box; margin: 0; padding: 0; }
.mobile-nav { background: #1a1a2e; font-family: sans-serif; }
.nav-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
}
.nav-brand { color: white; font-weight: bold; font-size: 1.1rem; }
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: white;
transition: all 0.3s;
}
.mobile-links {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.mobile-links.open { max-height: 300px; }
.mobile-links a {
display: block;
padding: 0.75rem 1.25rem;
color: #ccc;
text-decoration: none;
border-top: 1px solid rgba(255,255,255,.08);
transition: background 0.2s;
}
.mobile-links a:hover { background: rgba(255,255,255,.1); color: white; }
const btn = document.getElementById('hamburger');
const links = document.getElementById('mobileLinks');
btn.addEventListener('click', () => {
links.classList.toggle('open');
// Animate spans (X shape when open)
const spans = btn.querySelectorAll('span');
const isOpen = links.classList.contains('open');
spans[0].style.transform = isOpen ? 'rotate(45deg) translate(5px, 5px)' : '';
spans[1].style.opacity = isOpen ? '0' : '1';
spans[2].style.transform = isOpen ? 'rotate(-45deg) translate(5px, -5px)' : '';
});
Bình luận