منوهای چسبان (Sticky Menus) برای وب‌ سایت‌ها بسیار محبوب هستند زیرا تجربه کاربری بهتری را ارائه می‌دهند و به کاربران امکان می‌دهند تا به راحتی به بخش‌های مختلف سایت دسترسی پیدا کنند. در این آموزش، مراحل طراحی یک منوی چسبان با CSS را بررسی می‌کنیم.

مراحل طراحی منوی چسبان با CSS

۱. ساخت ساختار HTML

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

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">
    <title>منوی چسبان با CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <nav class="navbar" id="navbar">
        <ul>
            <li><a href="#home">خانه</a></li>
            <li><a href="#about">درباره ما</a></li>
            <li><a href="#services">خدمات</a></li>
            <li><a href="#contact">تماس با ما</a></li>
        </ul>
    </nav>
</header>

<section id="home">
    <h1>خوش آمدید به وب‌سایت ما</h1>
</section>
<section id="about">
    <h1>درباره ما</h1>
</section>
<section id="services">
    <h1>خدمات ما</h1>
</section>
<section id="contact">
    <h1>تماس با ما</h1>
</section>

</body>
</html>

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

۲. نوشتن CSS

حالا نوبت به نوشتن کد برای استایل‌ دهی به منو و افزودن خاصیت چسبان است. فایل styles.css را به شکل زیر ایجاد کنید:

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

header {
    background-color: #333;
}

.navbar {
    overflow: hidden;
    position: sticky; /* خاصیت چسبان */
    top: ; /* فاصله از بالا */
    z-index: 100; /* قرار دادن در بالای بقیه عناصر */
}

.navbar ul {
    list-style: none; /* حذف نقاط لیست */
    padding: ;
    margin: ;
}

.navbar ul li {
    float: right; /* قرار دادن لیست‌ها به سمت راست */
}

.navbar ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.navbar ul li a:hover {
    background-color: #575757; /* رنگ پس‌زمینه در حالت Hover */
}

section {
    padding: 60px;
    height: 500px; /* ارتفاع برای نمایش بهتر */
}

section:nth-of-type(odd) {
    background: #f2f2f2;
}

۳. توضیحات

  • خصوصیت position: sticky: این خصوصیت منو را چسبان می‌کند، به این معنی که هنگامی که کاربر به پایین صفحه پیمایش می‌کند، منو در بالای صفحه باقی می‌ماند.

  • خصوصیت top: این تعیین می‌کند که منو در فاصله پیکسل از بالای صفحه قرار بگیرد.

  • طراحی ظاهری: با استفاده از CSS، می‌توانیم رنگ‌ها، نوع فونت و دیگر جزئیات ظاهری منو را تنظیم کنیم.

نتیجه نهایی

با استفاده از کدهای فوق، شما یک منوی چسبان با CSS در وب‌ سایت خود خواهيد داشت که با پیمایش صفحه در بالای آن باقی می‌ماند و به کاربر تجربه کاربری بهتری ارائه می‌دهد.