Submenü anders gestalten

  • Hallo Leute,


    ich müsste ein Menü/Submenü schreiben, welches folgendermaßen aussieht:



    An sich wirklich einfach. Jedoch möchte ich mittels CSS das Menü so gestalten, dass sich die zweite und dritte Ebene komplett von der ersten unterscheidet. Hintergrund ist der: Ich schreibe aktuell eine Prozesslandkarte und die erste Ebene soll danach aussehen. Innerhalb der Prozesslandkarte kann man die verschiedenen Abteilungen anwählen.


    Ist das irgendwie möglich? Bisher sahen die Untermenüs genauso aus wie die erste Ebene.


    Es müsste so doch ohne Probleme gehen, oder?:



    Also ganz banal ausgedrückt.


    Jedoch werden die Einstellungen der Ebene 1 immer vererbt...


    Bitte um Hilfe :(

  • ich hatte jetzt in der Zeit wo du geantwortet hast das gebastelt

    https://codepen.io/basti1012/pen/VNeGeK?editors=1100

    weil ich dachte das du jede ebene ein anderen Style geben willst.

    Aber du willst jetzt ein submenü mit 3 ebenen haben die zur Seite rausgehen ,oder wie soll ich das verstehen ?


    Das Bild sieht für mich wie ein normales 3 wege Menü aus ,eigentlich nix ausergewöhnliches ,oder übersehe ich da was

  • Ist ja eigentlich das was ich schon gepostet habe.

    Aber ok .,dann nochmal an dein Beispiel.

    https://codepen.io/basti1012/pen/QPyPQJ?editors=1100

    ich musste deine Größe etwas ändern weil es sonst nicht auf mein Bildschirm passt.

    Habe den sub 2 und 3 auch nee andere Farbe gegeben damit du den Eintrag in der Css leichter finden tust.

    Das ist jetzt ein Weg wie du einzelne Felder bzw einzelene Ebene anders gestalten kannst

    Man könnte das bestimmt noch leichter gestalten, doch das wäre jetzt mein Weg gewesen.


    Damit solltest du dann dein Ziel erreichen ,wenn ich dich richtig verstanden habe.


    Edit:

    Ps, wenn du genau drauf achtest welcher Code gerade was macht ,kann man meistens noch paar Zeilen Code löschen weil die gar nicht gebraucht werden. Habe jetzt auch mal den Css gelöscht den man für der Darstellung jetzt nicht mehr brauchte.

    Auch kann man einige sachen zusammen fügen,dann brauch man das nicht alles extra aufschreiben .

    zb das

    könnte man so schreiben

    Code
    1. nav ul,
    2. nav ul li ul li{,
    3. nav a,
    4. ul li .level2{
    5. display:none;
    6. }

    und schon hat man die hälfte an Zeilen gespart.

    Aber das wahr jetzt nur Hinweiß nebenbei

  • An sich schon mal Danke für die Antwort und Geduld.

    Aber genau das ist das Problem:


    Ich möchte quasi die Submenüs anders gestalten, nicht nur Schrift etc.


    So wäre es geplant:


    sdsd.png


    Edit:

    Weil das Problem ist ja, dass andere Eigenschaften wie width, height etc. von der nav class vererbt wird. Genau das möchte ich verhindern. Die Unterpunkte sollen ein komplett eigenes Design haben.

  • das kann man eigentlich genau so machen mit etwas fummeln. Bei dir ist aber das schwerer weil du diese Pfeil Form hast und mit after und before arbeitest. Du hattest ja in meinen ersten Beispiel gesehen das man das eigentlich stylen kann wie man will.


    Ich muss das jetzt mal testen ob ich dein Bild nachstellen kann.

    Mit Js sollte das kein Problem sein , nur mit Css muss ich mal gerade selber testen

    EDIT:

    Oh wahr doch leichter als ich erst dachte.

    https://codepen.io/basti1012/pen/QPyPQJ?editors=1100


    Habe dein Bild jetzt nicht nachgebaut,aber du siehst das es geht und dann nur auf deins anwenden mußt.

  • Du meinst das alles in einer Linie untereinander ist ? Jetzt sind die Untermenüs ja leicht nach rechts verschoben.

    Oder meinst du das anders ? Aber egal wie du es meinst , eigentlich geht fast alles.

    Am einfachsten wäre das du alles fertig machst was du kannst und schaffst.

    Wenn dann noch was überbleibt kann man dir ja noch helfen.


    Ist einfacher wenn man dann zum Schluß noch mal hilft.

    Aber die kleinen verschiebungen ,die jetzt nach rechts gehen habe ich jetzt mal mit position verschoben.

    https://codepen.io/basti1012/pen/QPyPQJ?editors=1100


    Doch wie gesagt ich finde das einfacher wenn man zum schluß nochmal kuckt wenn man alle Paddings und margins und Border schon eingebaut hat weil die Angaben können auch wieder dazu führen das man neu positionieren muß.


    Habe dir gestern ja gesagt das man genau kucken soll das man meistens ja noch einiges an Css Löschen oder verkürzen kann.

    Hab gerade gesehen das ich das auch nicht gemacht habe.Da sieht man mal das man ausgeschlafen doch fitter ist.

  • Zitat

    Jetzt wäre es halt noch toll, wenn das Submenu untereinander angezeigt wird und überlappt und nicht alles verschiebt.

    Das kannst Du erreichen, wenn Du das Submenu absolut positionierst. I. allg. etwas wovon man abrät, aber in diesem Fall und allgemein bei Aufklappmenüs ein gängiges und bewährtes Verfahren:

    Ich habe es nicht bis ins Detail ausgearbeitet. Z. B. bei der Überdeckung heben sich die Menüpunkte wegen der einheitlichen Farbe nicht ab, da ist noch Feinarbeit gefragt.

  • Auch kein Problem, wenn Du durch eine geeignete Adressierung die Pfeilstruktur auf die erste Stufe beschränktst:

  • Ok, konnte ich auch beheben!

    Jetzt ist soweit alles perfekt!


    Nur eines noch:

    Wenn ich auf ein Menü gehe öffnet sich ja logischerweise das Submenu. Jedoch hat die absolute Positionierung herbeigeführt, dass die Unterpunkte jetzt übereinander liegen. Habe bereits versucht, diese mit margin und float auseinanderzubringen - jedoch vergebens..