Comment créer des sous-menus déroulants dans Bootstrap après la suppression du « sous-menu déroulant » ?

Fonctionnalité du sous-menu déroulant Bootstrap supprimée

Dans Bootstrap 3, la classe du sous-menu déroulant a été éliminée. Cette classe fournissait un moyen simple de créer des sous-menus imbriqués sous une liste déroulante principale. Cependant, les créateurs de Bootstrap ont décidé que les sous-menus étaient devenus obsolètes, en particulier dans les environnements mobiles.

Options alternatives pour la fonctionnalité des sous-menus

Méthodes CSS uniquement :

Pour Bootstrap 5, vous pouvez utiliser JavaScript ou CSS pour obtenir le sous-menu fonctionnalité :

Sous-menu de la barre de navigation CSS uniquement au survol

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Sous-menu de la barre de navigation CSS uniquement au survol (aligné à droite)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Méthode JavaScript pour Bootstrap 5 :

Au-delà des options CSS uniquement, vous pouvez également implémenter fonctionnalité de sous-menu dans Bootstrap 5 avec du JavaScript :

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling;
        el.style.display = el.style.display==='block'?'none':'block';
    })
});

Méthode CSS pour Bootstrap 3 :

Malgré la suppression de la classe dropdown-submenu, vous pouvez toujours implémenter fonctionnalité de sous-menu dans Bootstrap 3 avec CSS :

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

Conclusion

Bien que les classes de sous-menus spécifiques ne soient plus disponibles, il existe plusieurs approches alternatives que vous pouvez utiliser pour créer des sous-menus déroulants dans Bootstrap, en fonction de vos besoins et de la version que vous utilisez. que j'utilise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!