بهتر است برای ایجاد یک منوی سایت با CSS3، مراحل کامل تر را به شما توضیح دهم. منوی سایت می‌تواند به صورت افقی یا عمودی باشد، در اینجا به ایجاد یک منوی افقی متمرکز می‌شویم:

اگر هنوز دوره طراحی سایت با HTML , CSS کامل و پیشرفته ندیدی بهتره از لینک زیر شروع کنی :

آموزش طراحی رابط کاربری و پروژه محور با HTML 5 , CSS 3

مرحله 1: ایجاد ساختار HTML

ابتدا باید یک ساختار HTML برای منو ایجاد کنید. در مثال زیر، یک nav با ul و li ها به عنوان موارد منو ایجاد کرده‌ایم:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>منوی سایت</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">صفحه اصلی</a></li>
            <li><a href="#">خدمات</a></li>
            <li><a href="#">محصولات</a></li>
            <li><a href="#">درباره ما</a></li>
            <li><a href="#">تماس با ما</a></li>
        </ul>
    </nav>
</body>
</html>

مرحله 2: ایجاد فایل CSS

حالا باید یک فایل CSS برای طراحی منو ایجاد کنید. این فایل را با نام “style.css” یا نام دلخواه خود ذخیره کنید.

مرحله 3: طراحی منو با CSS

در فایل CSS، می‌توانید منو را با استفاده از انتخابگرها (selectors) و ویژگی‌ها (properties) طراحی کنید. در این مثال، منو با استفاده از CSS طراحی شده است:

/* ریست کردن مرورگر */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* استایل منو */
nav {
    background-color: #333; /* رنگ پس زمینه */
}

ul {
    list-style: none; /* حذف نشانگر لیست */
    display: flex; /* تبدیل لیست به فلکس باکس برای ایجاد منو افقی */
    justify-content: center; /* تراز میانه در افقی کردن منو */
}

li {
    margin: 10px; /* فاصله بین موارد منو */
}

a {
    text-decoration: none; /* حذف زیرخط لینک */
    color: white; /* رنگ متن لینک */
    font-weight: bold; /* وزن متن لینک */
    padding: 10px 20px; /* فضای داخلی لینک (عمق و عرض) */
    border-radius: 5px; /* گوشه‌های گرد لینک */
    transition: background-color 0.3s; /* انتقال رنگ پس زمینه با انیمیشن */
}

a:hover {
    background-color: #555; /* رنگ پس زمینه هنگام نشان دادن با موس */
}

مرحله 4: اضافه کردن فونت و تنظیمات دیگر (اختیاری)

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

مرحله 5: اضافه کردن منو به صفحه وب

فایل CSS را به صفحه HTML خود اضافه کنید، همچنین فایل HTML را در مرورگر باز کنید تا منوی سایت خود را مشاهده کنید.

با این مراحل، شما می‌توانید یک منوی سایت با CSS3 ایجاد کنید و آن را به شکل دلخواه خود طراحی کنید. به عنوان نمونه‌ای ساده، ما یک منوی افقی ایجاد کردیم که می‌توانید آن را با تغییراتی بهبود دهید و به نیازهای خود تطبیق دهید.