منوی سایت چیست؟

وقتی وارد یک وب‌سایت می‌شوید، معمولاً در بالای صفحه چند لینک مانند «خانه»، «آموزش‌ها»، «ابزارها» و «درباره ما» مشاهده می‌کنید. این بخش همان منوی سایت است.

منو به بازدیدکننده کمک می‌کند صفحات مختلف سایت را راحت‌تر پیدا کند. در یک سایت HTML و CSS، ساختار اصلی منو معمولاً با HTML ساخته می‌شود و ظاهر آن را با CSS طراحی می‌کنیم.

ساختار منو با HTML

قبل از اینکه سراغ CSS برویم، باید ساختار منو را با HTML بسازیم. ساده‌ترین منو می‌تواند چند لینک پشت سر هم باشد.

<nav class="menu">

    <a href="#">خانه</a>

    <a href="#">آموزش‌ها</a>

    <a href="#">ابزارها</a>

    <a href="#">درباره ما</a>

</nav>

این کد چه کاری انجام می‌دهد؟

طراحی منو با CSS

حالا HTML ما آماده است. اما اگر همین کد را اجرا کنید، منو ظاهر ساده‌ای خواهد داشت. اینجا CSS وارد عمل می‌شود.

برای اینکه گزینه‌های منو کنار یکدیگر قرار بگیرند، می‌توانیم از ویژگی display: flex استفاده کنیم.

.menu {
    display: flex;
    gap: 10px;
}

.menu a {
    padding: 10px 18px;
    text-decoration: none;
}

چند ویژگی مهم CSS

رنگ و ظاهر منوی سایت

حالا که ساختار منو را داریم، می‌توانیم رنگ پس‌زمینه، رنگ نوشته و گوشه‌های منو را تغییر دهیم.

.menu a {
    background: #6d5dfc;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
}

ویژگی border-radius باعث گرد شدن گوشه‌های منو می‌شود.

Hover در CSS چیست؟

وقتی نشانگر ماوس را روی یک گزینه منو قرار می‌دهیم، می‌توانیم ظاهر آن گزینه را تغییر دهیم. به این حالت Hover گفته می‌شود.

.menu a:hover {
    opacity: 0.8;
}

در این مثال وقتی کاربر ماوس را روی لینک قرار دهد، شفافیت آن کمی تغییر می‌کند.

می‌توانیم Hover را بسیار جذاب‌تر کنیم؛ مثلاً رنگ، سایه، اندازه یا حتی پس‌زمینه را تغییر دهیم.

ساخت منوی گرادینتی با CSS

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

.menu a {
    background:
        linear-gradient(
            90deg,
            #6d5dfc,
            #20c9b8
        );
}

linear-gradient چیست؟

linear-gradient یک گرادینت خطی ایجاد می‌کند. عدد 90deg جهت حرکت رنگ‌ها را مشخص می‌کند و دو رنگ بعد از آن، رنگ‌های گرادینت هستند.

چند نمونه منوی آماده CSS

اگر نمی‌خواهید تنظیمات را از ابتدا انجام دهید، یکی از نمونه‌های زیر را انتخاب کنید. بعد از انتخاب، می‌توانید تمام تنظیمات آن را تغییر دهید.

طراحی منوی واکنش‌گرا برای موبایل

امروزه بسیاری از کاربران سایت‌ها را با موبایل مشاهده می‌کنند. بنابراین منویی که فقط روی صفحه‌نمایش بزرگ ظاهر مناسبی داشته باشد، کافی نیست.

طراحی واکنش‌گرا یا Responsive Web Design یعنی ظاهر صفحه بتواند خودش را با اندازه صفحه‌نمایش دستگاه‌های مختلف هماهنگ کند.

@media (max-width: 600px) {

    .menu {
        flex-direction: column;
    }

    .menu a {
        width: 100%;
        text-align: center;
    }

}

در این مثال وقتی عرض صفحه کمتر از ۶۰۰ پیکسل شود، گزینه‌های منو به صورت عمودی زیر یکدیگر قرار می‌گیرند.