HTML Bootstrap Navbar - Dropdown auf gesamte Breite

[Dsimon24]

Hallo zusammen,

ich versuche bei der Erstellung einer Website - mit Bootstrap und
einer dort enthaltener NavBar - ein DropDown-Menü zu erstellen.

Ich stelle es mir so vor wie auf der Seite von Vodafone.de

Bei Mouseover auf ein Element öffnet sich darunter eine weitere Ebene auf gesamter Breite.
Bei einem weiteren Mouseover auf ein Element darin, öffnet sich eine weitere Ebene, da-
runter. Wie kann man sowas am besten realisieren? Bietet Bootstrap da schon vorgefertigte
Komponenten an? Vielleicht habt ihr ein paar Ideen für mich, wie ich da vorgehen kann.

VG,

 

[Tokolosh]

Das ganze hat schonmal nichts mit HTML zu tun.
Solche Dropdown Menüs werden mit CSS gelöst oder seit geraumer Zeit eigentlich eher mit JavaScript. Bootstrap selber nutzt für Dropdown Menüs in der aktuellen Version noch jQuery und die Popper.js Library, also auch JavaScript.

https://getbootstrap.com/docs/4.5/components/dropdowns/

 

[benneq]

https://www.google.com/search?q=bootstrap+nested+dropdown+mouseover

Stackoverflow ist auch 'ne feine Sache.

 

[Dsimon24]

So, ich habe jetzt eine Lösung für mich gefunden:

    $(document).ready(function () {
        $('#leistungen').mouseover(function() {
            $('#collapse1_3').show();
        })

        $('#leistungen').mouseout(function() {
            t = setTimeout(function() {
                $('#collapse1_3').hide();
            }, 100);

            $('#collapse1_3').on('mouseenter', function() {
                $('#collapse1_3').show();
                clearTimeout(t);
            }).on('mouseleave', function() {
                $('#collapse1_3').hide();
            })
        })
    })

Jetzt plöppt das aber bei mir nach einem Mouse-Over direkt auf.
Wie bekomme ich denn die Slide-Funktion darein, wie bspw.
bei einer Toggle-Navigation?