چگونه یک منوی ناوبری با قابلیت گسترش در هاور در Blazor بسازیم؟

چگونه یک منوی ناوبری با قابلیت گسترش در هاور در Blazor بسازیم؟

ساختن یک منوی ناوبری با قابلیت گسترش با هاور در Blazor می‌تواند یک ویژگی شیک و کاربرپسند باشد. در Blazor، شما می‌توانید از ترکیبی از CSS و کدهای C# برای ایجاد چنین منویی استفاده کنید. در اینجا، به شما نحوه ایجاد یک کامپوننت ناوبری را نشان خواهیم داد که با هاور گسترش می‌یابد. ابتدا نیاز دارید ایده‌های پایه‌ای از Blazor و نحوه استفاده از CSS را داشته باشید.

در این مثال، ما از CSS برای مدیریت ظاهر و استایل منو و از C# برای منطق Blazor استفاده می‌کنیم. به وسیله این ترکیب، می‌توانید قابلیت گسترش خودکار منو را هنگام هاور به اجرا در بیارید. در حالت عادی، آیتم‌های منو مخفی می‌شوند و تنها زمانی که کاربر روی آیتم‌ها هاور می‌کند، آنها دیده می‌شوند.

برای شروع، یک پروژه Blazor جدید ایجاد کنید یا به پروژه موجود خود بروید. سپس یک فایل CSS برای استایل‌ها و یک کامپوننت Blazor برای منو ایجاد کنید. مطمئن شوید که فایل‌های CSS شما در پروژه به درستی لینک شده‌اند. در Blazor، می‌توانید استایل‌ها را در فایل‌های CSS جداگانه یا مستقیما در فایل کامپوننت تعریف کنید.

با استفاده از Blazor's Razor syntax و C#، می‌توانید رویدادهای هاور مانند براق‌سازی و تغییر اندازه را کنترل کنید. مزیت Blazor در این است که به شما اجازه می‌دهد با استفاده از سینتکس آشنا و قدرت C# منطق پیچیده‌ای را اجرا کنید.

<!-- NavigationMenu.razor -->
<nav class="nav-menu">
    <ul>
        <li>خانه</li>
        <li class="expandable"><a href="#">سرویس‌ها</a>
            <ul class="submenu">
                <li><a href="#">مشاوره</a></li>
                <li><a href="#">توسعه نرم‌افزار</a></li>
            </ul>
        </li>
        <li>تماس با ما</li>
    </ul>
</nav>

<style>
    .nav-menu ul {
        list-style: none;
        padding: 0;
    }
    .nav-menu li {
        position: relative;
        padding: 10px;
        cursor: pointer;
    }
    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .expandable:hover .submenu {
        display: block;
    }
</style>