Bootstrap dropdown: منوهای تعاملی و انعطاف‌پذیر

Bootstrap dropdown از مؤلفه‌های تعاملی و چندمنظوره در رابط کاربری هستند که امکان نمایش لیستی از گزینه‌ها یا اقدامات را در یک منوی قابل باز و بسته شدن فراهم می‌کنند. این مؤلفه‌ها برای ساخت ناوبری مؤثر، ارائه عملکردهای متنی، و نمایش مجموعه‌ای از انتخاب‌ها بدون شلوغ کردن رابط کاربری، حیاتی هستند. این راهنمای جامع به بررسی دقیق ساختار، انواع موقعیت‌ها، ویژگی‌های پیشرفته، ملاحظات دسترسی‌پذیری، و راهکارهای خلاقانه در استفاده از دراپ‌داون‌ها می‌پردازد.

ساختار پایه شامل یک عنصر محرک (معمولاً دکمه یا لینک) و منوی دراپ‌داون است. این اجزا از طریق ویژگی‌های HTML و کلاس‌های Bootstrap به هم مرتبط می‌شوند:

عنصر محرک:

می‌تواند دکمه (<button>) یا لینک (<a>) باشد.
کلاس .dropdown-toggle: ظاهر عنصر را تنظیم کرده و عملکرد دراپ‌داون را مشخص می‌کند.
ویژگی data-bs-toggle="dropdown": فعال‌سازی عملکرد دراپ‌داون.
aria-expanded: نشان‌دهنده وضعیت باز یا بسته بودن منو برای فناوری‌های کمکی.
data-bs-auto-close: تعیین می‌کند که آیا منو هنگام کلیک بیرون یا از دست دادن فوکوس بسته شود.

منوی دراپ‌داون:

یک <div> با کلاس .dropdown-menu.
شامل گزینه‌هایی با کلاس .dropdown-item.
می‌تواند دارای جداکننده‌ها (<hr class="dropdown-divider">) و عنوان بخش‌ها (<h6 class="dropdown-header">) باشد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Dropdown</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Dropdown</h2>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap انعطاف زیادی در محل قرارگیری منوی دراپ‌داون نسبت به عنصر محرک ارائه می‌دهد:

.dropdown (پیش‌فرض): باز شدن منو به سمت پایین.
.dropup: باز شدن منو به سمت بالا.
.dropstart: باز شدن منو به سمت چپ.
.dropend: باز شدن منو به سمت راست.

<div class="container mt-4">
    <h2>Dropdown Placements</h2>
    <div class="btn-group">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
            <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
        </div>
        <div class="dropup">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
            <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
        </div>
        <div class="dropstart">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropstart</button>
            <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
        </div>
        <div class="dropend">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropend</button>
            <ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li></ul>
        </div>
    </div>
</div>

ساختار منو: آیتم‌ها، جداکننده‌ها و سرعنوان‌ها

.dropdown-item: گزینه‌ای قابل انتخاب در منو.
.dropdown-divider: جداکننده‌ی بصری بین گروه‌های آیتم‌ها.
.dropdown-header: عنوان غیرتعاملی برای بخش‌بندی آیتم‌ها.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown with Items
    </button>
    <ul class="dropdown-menu">
        <li><h6 class="dropdown-header">Section 1</h6></li>
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><h6 class="dropdown-header">Section 2</h6></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><button class="dropdown-item" type="button">A button item</button></li>
    </ul>
</div>

آیتم‌های فعال و غیرفعال

.active: نشان‌دهنده‌ی گزینه‌ی انتخاب‌شده یا فعال.
.disabled: غیرفعال‌سازی بصری و عملکردی گزینه‌ها.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Active/Disabled Items
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#" aria-current="true">Active item</a></li>
        <li><a class="dropdown-item" href="#">Regular item</a></li>
        <li><a class="dropdown-item disabled" href="#" aria-disabled="true">Disabled item</a></li>
    </ul>
</div>

می‌توان فرم‌ها را به طور مستقیم داخل منوی دراپ‌داون قرار داد، مثلاً برای ورود ایمیل و رمز عبور یا فیلتر کردن محتوا. در این حالت، به ساختار صحیح فرم و نحوه مدیریت ارسال آن توجه کنید.

<div class="dropdown">
    <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown with Form
    </button>
    <div class="dropdown-menu p-4" style="width: 300px;">
        <form>
            <div class="mb-3">
                <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-3">
                <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="dropdownCheck">
                    <label class="form-check-label" for="dropdownCheck">Remember me</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
</div>

جایگزین انتخابگرهای استاندارد (Select)

می‌توانید با استفاده از دراپ‌داون، جایگزینی برای عناصر <select> ایجاد کنید که ظاهری زیباتر و قابلیت‌های تعاملی بیشتری دارد. البته، حتماً مسائل مربوط به دسترسی‌پذیری و ناوبری با صفحه‌کلید را مد نظر قرار دهید.

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

<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Select an Option
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#" data-value="option1">Option 1</a></li>
        <li><a class="dropdown-item" href="#" data-value="option2">Option 2</a></li>
        <li><a class="dropdown-item" href="#" data-value="option3">Option 3</a></li>
    </ul>
    <input type="hidden" id="selectedOption" value="">
</div>

<script>
    const dropdownItems = document.querySelectorAll('.dropdown-item');
    const dropdownButton = document.querySelector('.dropdown-toggle');
    const selectedInput = document.getElementById('selectedOption');

    dropdownItems.forEach(item => {
        item.addEventListener('click', function(event) {
            dropdownButton.textContent = this.textContent;
            selectedInput.value = this.dataset.value;
        });
    });
</script>

ملاحظات دسترسی‌پذیری

برای اطمینان از دسترسی‌پذیری منوهای Bootstrap dropdown:

استفاده از HTML معنایی: دکمه برای محرک و دکمه یا لینک برای آیتم‌ها.
aria-haspopup="true" روی محرک: اطلاع به فناوری‌های کمکی.
aria-expanded: تغییر وضعیت باز/بسته بودن منو.
aria-controls: ارتباط محرک با منو از طریق شناسه منو.
role="menu" و role="menuitem" برای تعریف نقش منوها و آیتم‌ها.
ناوبری با صفحه‌کلید: پیمایش با کلیدهای جهت، انتخاب با Enter/Space و بستن با Escape.
مدیریت فوکوس: هنگام باز یا بسته شدن منو باید فوکوس به درستی مدیریت شود.

استفاده‌های خلاقانه از دراپ‌داون‌ها

فراتر از ناوبری ساده، می‌توانید دراپ‌داون‌ها را برای کاربردهای متنوعی استفاده کنید:

منوهای زمینه‌ای (Context Menus): نمایش عملکردهای مرتبط با راست‌کلیک.
انتخابگر رنگ: نمایش پالت رنگ‌ها برای انتخاب.
انتخابگر اندازه فونت: ارائه گزینه‌هایی برای تغییر اندازه نوشته.
فیلترها و مرتب‌سازی: نمایش گزینه‌هایی برای فیلتر کردن یا مرتب‌سازی محتوا.
منوی حساب کاربری: دسترسی سریع به تنظیمات، خروج، و غیره.
دکمه‌های اشتراک‌گذاری: لیستی از پلتفرم‌های اجتماعی برای اشتراک‌گذاری.

بهترین روش‌ها

منوهای مختصر: از نمایش تعداد زیاد آیتم‌ها در یک منو خودداری کنید.
گروه‌بندی منطقی: آیتم‌ها را با استفاده از جداکننده‌ها و سرعنوان‌ها دسته‌بندی کنید.
برچسب‌های واضح: متن آیتم‌ها باید روشن و گویای عملکرد آن‌ها باشد.
انتخاب موقعیت مناسب: بسته به زمینه و فضای صفحه، بهترین موقعیت برای منو را انتخاب کنید.
تست کامل: عملکرد منوها را در مرورگرها و دستگاه‌های مختلف بررسی کنید.
اولویت به دسترسی‌پذیری: مطمئن شوید تمام کاربران—including افراد دارای ناتوانی—می‌توانند از دراپ‌داون‌ها استفاده کنند.

جمع‌بندی

Bootstrap dropdown یک مؤلفه‌ی انعطاف‌پذیر و ضروری برای ایجاد رابط کاربری تعاملی و کاربرپسند هستند. با درک ساختار آن‌ها، بهره‌گیری از موقعیت‌ها و ویژگی‌های مختلف، و توجه ویژه به دسترسی‌پذیری، می‌توانید منوهایی بسازید که به شیوه‌ای مؤثر گزینه‌ها را نمایش دهند بدون اینکه فضای رابط کاربری را شلوغ کنند. از قدرت “آشکارسازی کنترل‌شده” بهره ببرید و تجربه‌ای پویا و کارآمد برای کاربران خود فراهم کنید.