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

مرحله ۱: ساختار HTML

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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">
    <title>هدر واکنش‌گرا</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>وب‌سایت من</h1>
            <nav>
                <ul>
                    <li><a href="#">خانه</a></li>
                    <li><a href="#">درباره ما</a></li>
                    <li><a href="#">خدمات</a></li>
                    <li><a href="#">تماس با ما</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">☰</div>
        </div>
    </header>
</body>
</html>

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

مرحله ۲: استایل CSS

حالا نوبت به افزودن استایل به هدر برای ظاهر زیباتر و واکنش‌گرا می‌رسد. این استایل‌ها را در فایل style.css قرار دهید:

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

header {
    background: #333;
    color: #fff;
    padding: 10px ;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 120px;
    margin:  auto;
    padding:  20px;
}

h1 {
    margin: ;
}

nav ul {
    list-style: none;
    padding: ;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

@media (max-width: 768px) {
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: ;
        background: #333;
        width: 100%;
    }

    nav.active ul {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }
}

مرحله ۳: افزودن JavaScript (اختیاری)

برای اینکه منوی هدر شما در دستگاه‌های کوچک‌تری مانند موبایل قابل باز و بسته شدن باشد، می‌توانید کدی به JavaScript زیر اضافه کنید. این کد را قبل از بسته شدن تگ </body> در فایل HTML خود قرار دهید:

<script>
    const menuToggle = document.querySelector('.menu-toggle');
    const nav = document.querySelector('nav');

    menuToggle.addEventListener('click', () => {
        nav.classList.toggle('active');
    });
</script>

نتیجه‌ گیری

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