Comment puis-je créer des menus déroulants à plusieurs niveaux dans Twitter Bootstrap 2 ?

Création de menus déroulants à plusieurs niveaux avec Twitter Bootstrap 2

Twitter Bootstrap 2 fournit un ensemble robuste de composants, mais les menus déroulants à plusieurs niveaux ne sont pas pris en charge de manière native . Ce problème a soulevé des inquiétudes au sein de la communauté GitHub, conduisant de nombreux développeurs à rechercher des solutions alternatives.

Pour remédier à cette limitation, le code CSS suivant peut être implémenté :

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

En ajoutant ce CSS à votre application, vous pouvez créer une classe .sub-menu personnalisée qui vous permet d'étendre les listes déroulantes standard pour inclure des niveaux supplémentaires. La position et la visibilité du sous-menu peuvent être contrôlées via le CSS.

Cette solution a été créée avant la version 3 de Bootstrap, qui a introduit la prise en charge native des listes déroulantes à plusieurs niveaux. Si vous utilisez Bootstrap version 2, cette solution convient pour obtenir une fonctionnalité similaire. Cependant, pour les versions 3 et supérieures de Bootstrap, l'utilisation de cette solution n'est plus nécessaire.

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!