BT4, Navbar mit Dropdown und Dropright

  • Hallo zusammen,


    ich komme aktuell nicht so richtig voran... In einem neuen Projekt möchte ich eine Startseite für die Mitarbeiter erstellen, die Sie "erblicken" wenn Sie ihren Browser starten.


    In dieser Startseite soll eine Navigationsleiste mit unterschiedlichen Menüpunkten, darunter auch Dropdowns und in den Dropdowns auch noch Dropright.


    Die Nav-Bar an sich ist kein Problem, auch ein Dropdown in der Navbar stellt jetzt nicht die Probleme dar, aber innerhalb einer Dropdown kann ich keinen Eintrag zu einem Dropright machen mit weiteren Menüpunkten.


    Was ich also machen möchte ist, eine Menüleiste mit Dropdown und verschachtelten Dropright Einträgen, welche aber immer auf der Startseite als "Tab" geöffnet wird, so dass die Navigationsleiste immer da bleibt.


    Hier ist mein funktionierende Code mit Dropdown, aber ohne Dropright :(


    Frage ist, wie kann ich jetzt beispielsweise den Eitnrag Link 1 auch als dropright erstellen, mit weiteren Einträgen??


    Danke,


    MfG


    Erik

  • Offensichtlich verwendest Du Bootstrap4 und das BT4 ist ein Schreibfehler.


    Das Thema von Multilevel-Menüs wird hier diskutiert:

    https://stackoverflow.com/ques…ropdown-inside-navigation

    und sie schreiben:

    Zitat
    • But is there any built in method from bootstrap for this multilevel dropdown ?
    • There is none. Therefore this solution. As far as i remember, the bootstrap developers think that multilevel dropdowns are not a good ui design. But in my opinion there are cases where multilevel dropdowns are ok.

    also kein Unterstützung durch Bootstrap.

    Es werden dort aber Lösungen angegeben, wie man das Bootstrap-Menü mit zusätzlichem CSS und jQuery erweitern kann.


  • Offensichtlich verwendest Du Bootstrap4 und das BT4 ist ein Schreibfehler.

    Sorry, ich dachte BT4 und Bootstrap 4 sei das gleiche... bin recht neu in der Thematik... bitte entschuldige das Missgeschick.


    Ich arbeite mich mal durch die Links und gebe Rückmeldung.


    Schönen Montag!

  • Servus again :D


    Bin gut voran gekommen, Navbar sieht ganz gut aus... Ich habe ein paar Trennstriche gemacht, diese werden aber auch im Dropdown-Untermenü übernommen, siehe hier: html-seminar.de/woltlab/attachment/2616/


    Ich habe

    Code
    .nav-menu li a {
                    border: solid;
                    border-width: 0px 1px 0px 0px;
                    border-color: #000;
                }
                
                .nav-menu li:last-child a {
                    border-right:none;
                }

    verwendet, dieser wird aber auch auf das Untermenü angewendet und sieht nicht schön aus. Habe auch eine Klasse erstellt namens:

    Code
    .border-out {
                    border: none;
                }

    ... und diese Klasse dann den Untermenüeinträgen zugeordnet, leider klappt das nicht, vielleicht weil das andere CSS Attribut übergeordnet ist?


    Gibt es einen Weg die Unterpunkte ohne Rahmen zu versehen?


    Danke,


    Erik


    *edit*

    mit

    Code
    .nav-menu li .nav-link {
                    border: solid;
                    border-width: 0px 1px 0px 0px;
                    border-color: #000;
                }
                
                .nav-menu li:last-child .nav-link {
                    border-right:none;
                }

    funktioniert es wie gewollt :D

  • Wahrscheinlich geht das auch ohne zusätzliche Klasse, wenn du die Unterpunkte der ersten Stufe gezielt adressierst:

    Code
                .nav-menu>ul>li>a {
                    border: solid;
                    border-width: 0px 1px 0px 0px;
                    border-color: #000;
                }
                
                .nav-menu>ul>li:last-child>a {
                    border-right:none;
                }
  • Wahrscheinlich geht das auch ohne zusätzliche Klasse, wenn du die Unterpunkte der ersten Stufe gezielt adressierst:

    Code
                .nav-menu>ul>li>a {
                    border: solid;
                    border-width: 0px 1px 0px 0px;
                    border-color: #000;
                }
                
                .nav-menu>ul>li:last-child>a {
                    border-right:none;
                }

    jap, gerade probiert und geht auch, danke, ist etwas kürzer :)


    Gibt es noch die Möglichkeit, wenn ich im Dropdown-Untermenü bin, dieses farbig zu hinterlegen? Aktuell habe ich :hover und orange, aber wenn ich im Dropdown dann über ein anderen Punkt gehe, wird dieser orange, der erste Oberpunkt aber nicht mehr... schön wäre es, wenn der oberste Punkt auch immer orange bliebe... könnt ihr euch vorstellen was ich meine?

  • Tatsächlich... danke!


    Eine Frage zur navbar habe ich noch... bei einem Menüpunkt mit Untermenü, passiert das:

    html-seminar.de/woltlab/attachment/2617/


    das wird abgeschnitten, also nicht wirklich responsive... Was gibt es hier für Möglichkeiten? Kann man irgendwie errechnen, dass wenn es nicht auf die Breite passt, nach unten geöffnet wird? Weiß nicht so recht, nach was ich da suchen sollte...


    achja, und gibts es die Möglichkeit bei bestimmter bildschirmgröße das Menü schon auf das symbol zu reduzieren? So dass mein Menü nicht unterbricht und auf Zeile 2 weiter geht?

  • Zitat

    gibts es die Möglichkeit bei bestimmter bildschirmgröße das Menü schon auf das symbol zu reduzieren?

    Wenn ich mich richtig erinnere, unterstützt Boostrap solch ein Menü mit einem Hamburger-Symbol. Wirf mal einen Blick in die Doku.

  • https://codepen.io/ny_unity/pen/BaKWQzg


    Es wäre ideal, wenn bei viewport kleiner xl, soll die Leiste (in meinem Beispiel oben extrem verkürzt) ausgebelndet und der button für collapse, also der hamburger, eingeblendet und genutzt werden...



    ah, ich stehe halt erst am anfang... sinnloser beitrag von mir, aber wem es hilft: <nav class="navbar navbar-expand-xl navbar-light bg-light">

  • korrekt, die #9 ist gelöst. Thread ist fast abgeschlossen :D


    Wenn ich das Fenster klein ziehe, also responsive ansehen möchte, dann ist der "Hamburger" geöffnet und nicht geschlossen... Außerdem, werden die Submenüs ja jetzt immer untereinander geöffnet. Kann man das noch irgendwie einstellen, dass die Subs eine andere Farbe erhalten, wenn geöffnet?

  • Zitat

    Außerdem, werden die Submenüs ja jetzt immer untereinander geöffnet. Kann man das noch irgendwie einstellen, dass die Subs eine andere Farbe erhalten, wenn geöffnet?

    Bestimmt, nur an deinem Codepen kann man es nicht nachvollziehen, das Menü öffnet sich nicht, wenn der Hamburger da ist.

  • Komisch, vielleicht nen Bug bei mir. Muss ich morgen mal testen... kann ich den Submenüs ids geben, damit diese dann anders aussehen oder wie kann ich das lösen?

  • Im Codepen ist ja das Javascript, HTML, CSS direkt sichtbar und da finde ich dieses:

    $subMenu.toggleClass('show');

    d. h. die Klasse show wird umgeschaltet.

    Außerdem gibt es die Entwicklerwerkzeuge des Browsers, dort kann man im HTML-Inspektor beobachten, wie diese Klasse auftaucht und verschwindet. Diese sind sehr nützlich bei der Entwicklung, wenn Du damit noch nicht vertraut bist, dann informiere dich darüber.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!