0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

پنهان شدن submenu در بوت استرپ

Bootstrap dropdown sub-menu missing

چطور میتونم submenu  تو dropdwon  با بوت استرپ اضافه کنم؟ من  می‌خوام منوی کشویی داشته باشم که زیرمنو ام داشته باشه، اما زیرمنوها به درستی نمایش داده نمیشن

پاسخ

سلام برای ایجاد منوی کشویی با ساب منو در بوت استرپ 5، میتونی از ساختار زیر استفاده کنی بوت استرپ 5 به طور پیش‌فرض از زیرمنوها پشتیبانی نمی‌کنه، اما با استفاده از HTML و CSS می‌تونی به راحتی این کار رو انجام بدی. اینجا نحوه اضافه کردن زیرمنو به منوی کشویی با استفاده از بوت استرپ 5 رو برات نوشتم

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Dropdown with Submenu</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .dropdown-menu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
            border-radius: .25rem;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">More options</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Submenu item 1</a></li>
                        <li><a class="dropdown-item" href="#">Submenu item 2</a></li>
                    </ul>
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
    <script>
        document.querySelectorAll('.dropdown-submenu a').forEach((elem) => {
            elem.addEventListener('click', (e) => {
                e.preventDefault();
                const submenu = elem.nextElementSibling;
                submenu.classList.toggle('show');
            });
        });
    </script>
</body>
</html>

 اینجا یک دکمه کشویی ساخته شده که با کلیک روی اون، منوی کشویی باز میشه. تو این منو، یک زیرمنو اضافه شده  که با استفاده از کلاس dropdown-submenu مشخص شده است.

تو CSS، برای زیرمنو، موقعیتش تنظیم شده تا درست کنار منوی اصلی نمایش داده بشه.

و تو JavaScript  با کلیک بر روی آیتم‌های زیرمنو، نمایش آن‌ها تغییر می‌کنه

با این روش، منوی کشویی با زیرمنو به درستی عمل می‌کنه

پاسخ: 1403/05/31
آخرین آپدیت: 1403/07/19