آنچه در این مقاله می‌خوانید [پنهان‌سازی]

منوی همبرگری یکی از اجزای پرکاربرد در طراحی وب سایت است که به کاربران این امکان را می‌دهد تا به آسانی به بخش‌های مختلف سایت دسترسی پیدا کنند. در این مقاله، یاد خواهید گرفت که چگونه یک منوی همبرگری با html و css بسازید.

HTML

ابتدا، یک ساختار ساده HTML برای منوی همبرگری ایجاد می‌کنیم. این ساختار شامل یک دکمه برای باز و بسته کردن منو و لیستی از گزینه‌های منو خواهد بود.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">
    <link rel="stylesheet" href="styles.css">
    <title>منوی همبرگری</title>
</head>
<body>
    <nav class="navbar">
        <div class="menu-icon" id="menu-icon">
            &#9776; 
        </div>
        <ul class="nav-list" id="nav-list">
            <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>

آموزش html css (رایگان)

CSS

حالا برای طراحی منوی همبرگری، CSS را اضافه می‌کنیم. این کد شامل استایل‌های لازم برای زیباسازی منو و تنظیم ریسپانسیو بودن آن است.

body {
    margin: ;
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
    overflow: hidden;
}

.menu-icon {
    font-size: 30px;
    color: white;
    cursor: pointer;
    padding: 15px;
    display: none; /* در حالت دسکتاپ مخفی است */
}

.nav-list {
    list-style-type: none;
    padding: ;
    margin: ;
    display: flex;
}

.nav-list li {
    flex: 1;
}

.nav-list a {
    display: block;
    padding: 14px;
    text-align: center;
    color: white;
    text-decoration: none;
}

.nav-list a:hover {
    background-color: #575757;
}

@media (max-width: 600px) {
    .nav-list {
        display: none; /* در حالت موبایل مخفی است */
        flex-direction: column;
    }

    .menu-icon {
        display: block; /* در حالت موبایل نمایش داده می‌شود */
    }
}

جاوا اسکریپت

برای اینکه منوی همبرگری قابلیت باز و بسته شدن داشته باشد، از یک اسکریپت ساده جاوااسکریپت استفاده می‌کنیم.

const menuIcon = document.getElementById('menu-icon');
const navList = document.getElementById('nav-list');

menuIcon.addEventListener('click', () => {
    navList.classList.toggle('active');
});

همچنین، می‌توانید استایل زیر را در CSS اضافه کنید تا زمانی که منو باز است، نمایان شود:

.nav-list.active {
    display: flex;
}

نتیجه‌ گیری

با این مراحل ساده، شما یک منوی همبرگری با html و css ایجاد کرده‌اید. این منو در اندازه‌ های مختلف صفحه قابل استفاده است و با افزودن جاوااسکریپت، قابلیت عملکردی آن افزایش می‌یابد. حالا می‌توانید این منو را در پروژه‌های خود به کار بگیرید و کاربران به راحتی به بخش‌های مختلف سایت شما دسترسی پیدا کنند.