اگر تا به حال در طراحی سایت کار کرده باشید، حتماً دیدهاید که وقتی صفحه را در گوشی باز میکنید، منوی اصلی بهصورت یک آیکون سهخطی (همبرگری) در بالای صفحه ظاهر میشود. این آیکون با لمس کاربر باز میشود و فهرست لینکها را نمایش میدهد.
سؤال اصلی بسیاری از طراحان تازهکار این است: «چطور میتوانم چنین منویی بسازم بدون اینکه از کتابخانهها یا فریمورکهای آماده استفاده کنم؟»
در این راهنما، قصد داریم به سادهترین زبان ممکن و فقط با HTML، CSS و JavaScript یک منوی همبرگری واکنشگرا بسازیم.
این مقاله طوری نوشته شده که اگر حتی برای اولین بار با جاوااسکریپت کار میکنید، بتوانید گام به گام پیش بروید و در پایان یک منوی زیبا و کاربردی داشته باشید.
گام اول: درک مفهوم منوی همبرگری
منوی همبرگری در طراحی وب به آیکونی گفته میشود که معمولاً سه خط افقی دارد و با کلیک روی آن، منوی ناوبری سایت (Navigation Menu) باز یا بسته میشود.
هدف از آن، صرفهجویی در فضا در نسخههای موبایل است. در صفحهنمایش کوچک نمیتوان فهرست طولانی لینکها را همیشه نمایش داد، پس این منو فقط زمانی ظاهر میشود که کاربر آن را بخواهد.
گام دوم: ایجاد ساختار HTML
اولین مرحله، ساختار پایه HTML است. در این بخش فقط به اسکلت ساده نیاز داریم. فایل جدیدی با نام index.html ایجاد کنید و محتوای زیر را در آن بنویسید:
<!DOCTYPE html>
<html lang=”fa”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>منوی همبرگری با جاوااسکریپت</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<nav class=”navbar”>
<div class=”logo”>سایت من</div>
<div class=”hamburger”>
<span></span>
<span></span>
<span></span>
</div>
<ul class=”nav-links”>
<li><a href=”#”>خانه</a></li>
<li><a href=”#”>درباره ما</a></li>
<li><a href=”#”>خدمات</a></li>
<li><a href=”#”>تماس با ما</a></li>
</ul>
</nav>
<script src=”script.js”></script>
</body>
</html>
در این ساختار:
- <div class=”hamburger”> همان آیکون سهخطی است که با جاوااسکریپت به آن رفتار باز و بسته شدن منو را خواهیم داد.
- <ul class=”nav-links”> شامل لینکهای اصلی منو است.
گام سوم: استایلدهی با CSS
حالا باید منو را زیبا کنیم تا در حالت موبایل پنهان شود و فقط آیکون همبرگر نمایش داده شود. فایل جدیدی به نام style.css بسازید و کد زیر را در آن قرار دهید:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #f4f4f4;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0066cc;
padding: 10px 20px;
color: #fff;
}
.logo {
font-size: 1.5em;
font-weight: bold;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
height: 3px;
width: 25px;
background: white;
margin: 4px 0;
border-radius: 3px;
transition: 0.3s;
}
/* حالت موبایل */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: absolute;
top: 60px;
right: 0;
width: 200px;
background: #0066cc;
flex-direction: column;
align-items: center;
display: none;
}
.nav-links li {
margin: 15px 0;
}
.nav-links.active {
display: flex;
}
}
در این کد:
- در اندازههای بزرگ (مانند دسکتاپ)، منو بهصورت افقی نمایش داده میشود.
- در اندازههای کوچکتر از ۷۶۸ پیکسل، منو پنهان میشود و فقط آیکون همبرگری دیده میشود.
- زمانی که منو فعال میشود (با اضافه شدن کلاس active)، لینکها ظاهر میشوند.
گام چهارم: افزودن منطق با جاوااسکریپت
حالا باید کاری کنیم که وقتی کاربر روی آیکون همبرگر کلیک میکند، منو باز و بسته شود. فایل script.js را باز کنید و کد زیر را بنویسید:
const hamburger = document.querySelector(‘.hamburger’);
const navLinks = document.querySelector(‘.nav-links’);
hamburger.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘active’);
// انیمیشن تغییر شکل آیکون همبرگری
hamburger.classList.toggle(‘toggle’);
});
اکنون باید در CSS نیز تغییر ظاهری آیکون را هنگام باز شدن منو تنظیم کنیم. در همان فایل CSS، این کد را اضافه کنید:
.hamburger.toggle span:nth-child(1) {
transform: rotate(45deg) translateY(8px);
}
.hamburger.toggle span:nth-child(2) {
opacity: 0;
}
.hamburger.toggle span:nth-child(3) {
transform: rotate(-45deg) translateY(-8px);
}
با این کار، وقتی روی منوی همبرگری کلیک میشود، آیکون به شکل یک «ضربدر (X)» درمیآید که نشاندهنده باز بودن منو است.
گام پنجم: اضافه کردن انیمیشن نرم و افکتها
تجربه کاربر با انیمیشنهای روان بسیار بهتر میشود. برای همین، بهتر است افکت نمایان شدن منو را نرم کنیم.
کد زیر را به بخش .nav-links.active در CSS اضافه کنید:
.nav-links {
transition: all 0.4s ease-in-out;
opacity: 0;
transform: translateY(-20px);
}
.nav-links.active {
opacity: 1;
transform: translateY(0);
}
اکنون هنگام باز و بسته شدن منو، افکت نرمی ایجاد میشود.
گام ششم: اضافه کردن پسزمینه نیمهشفاف هنگام باز شدن منو
برای اینکه هنگام باز بودن منو، تمرکز کاربر روی منو باقی بماند، میتوان یک پسزمینه نیمهشفاف به کل صفحه افزود.
کافی است این ساختار HTML را کمی تغییر دهیم:
<div class=”overlay”></div>
و قبل از بسته شدن تگ </body> این خط را اضافه کنید. سپس در CSS بنویسید:
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: none;
}
.overlay.active {
display: block;
}
و در فایل script.js کد زیر را اضافه کنید تا همزمان با باز شدن منو، این پوشش نیز فعال شود:
const overlay = document.querySelector(‘.overlay’);
hamburger.addEventListener(‘click’, () => {
navLinks.classList.toggle(‘active’);
overlay.classList.toggle(‘active’);
hamburger.classList.toggle(‘toggle’);
});
گام هفتم: بستن منو با کلیک روی بیرون
کاربر ممکن است بخواهد با کلیک روی فضای خالی بیرون از منو، آن را ببندد. برای این کار کافی است کد زیر را به script.js اضافه کنید:
overlay.addEventListener(‘click’, () => {
navLinks.classList.remove(‘active’);
overlay.classList.remove(‘active’);
hamburger.classList.remove(‘toggle’);
});
اکنون اگر روی پسزمینه نیمهشفاف کلیک کنید، منو بسته میشود.
گام هشتم: تنظیمات واکنشگرایی (Responsive) دقیقتر
ممکن است در تبلتها یا صفحهنمایشهای خاص، منو بهدرستی نمایش داده نشود. بهتر است اندازه آیکون و منو را بر اساس ارتفاع نیز کنترل کنیم:
@media (max-width: 500px) {
.nav-links {
width: 100%;
top: 55px;
}
.nav-links li {
margin: 12px 0;
}
}
با این تغییر، منو در گوشیهای کوچکتر نیز کاملاً در دسترس و خوانا خواهد بود.
گام نهم: زیباسازی بیشتر با رنگ و سایه
اگر بخواهید ظاهر منو جذابتر شود، میتوانید رنگ پسزمینه منو را روشنتر و سایهای ظریف به آن اضافه کنید:
.nav-links {
background: #0077ee;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
همچنین میتوانید برای لینکهای منو حالت شناور (Hover) تعریف کنید:
.nav-links a:hover {
color: #ffeb3b;
}
گام دهم: تست در مرورگرهای مختلف
پروژه را در مرورگرهای مختلف (Chrome، Firefox، Safari) باز کنید و اندازه صفحه را تغییر دهید.
در هر حالت، باید آیکون همبرگری بهدرستی عمل کند. اگر در بعضی مرورگرها منو بهدرستی باز نمیشود، بررسی کنید که مسیر فایلهای CSS و JS به درستی درج شده باشند.
خطاهای رایج و راه جلوگیری
- باز نشدن منو پس از کلیک:بیشتر اوقات به دلیل اشتباه در نام کلاسهاست. مطمئن شوید نامهای .hamburger و .nav-links در HTML و جاوااسکریپت یکسان هستند.
- ندیدن تغییر ظاهری آیکون:فراموش کردن بخش CSS مربوط به .hamburger.toggle باعث میشود آیکون تغییر شکل ندهد.
- پوشاندن ناحیه ناوبری توسط پسزمینه:اگر z-index اشتباه تنظیم شود، لایهها روی هم میافتند. در صورت بروز این مشکل، برای .nav-links مقدار z-index: 10; تنظیم کنید.
- مشکلات واکنشگرایی:استفاده نکردن از meta viewport در <head> باعث میشود منو در موبایل درست کار نکند. حتماً این خط را در کد HTML خود قرار دهید:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- عدم اجرای جاوااسکریپت:اطمینان حاصل کنید فایل script.js در پایین تگ </body> قرار گرفته باشد تا پس از بارگذاری عناصر HTML اجرا شود.
جمعبندی
در این آموزش گامبهگام یاد گرفتیم چگونه بدون استفاده از هیچ کتابخانه یا کد آماده، یک منوی همبرگری واکنشگرا و زیبا با HTML، CSS و JavaScript بسازیم.
این منو نه تنها در گوشی، بلکه در تبلت و دسکتاپ هم عملکرد مطلوبی دارد.حالا که ساختار پایه را یاد گرفتهاید، میتوانید جلوههای بیشتری مانند انیمیشن لغزشی، رنگهای متغیر، یا آیکونهای SVG اضافه کنید.
اگر این آموزش برایتان مفید بود، میتوانید آن را در پروژههای واقعیتان پیادهسازی کنید یا نسخه شخصیسازیشده خود را بسازید؛ چون ساخت یک منوی ساده در واقع نخستین گام برای تبدیل شدن به یک توسعهدهنده رابط کاربری حرفهای است.
