Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript

[basti1012]

Kannst du mal deinen Code bei Codepen posten ?.
Das ist einfacher wenn man das sieht wie du es bis hetzt gemacht hast .

Zu frage 3.
Ja zur anderen Seite einblenden.

Wo kommt der Pfeil her, ohne Sonderzeichen ?.
Ja , das habe ich zwar so auch noch nicht gesehen , aber ist nee coole Idee.
Der Pfeil wird durch den Border erstellt

label:after{
  content:"";
  position:absolute;
  display:block;
  top:50%;
  right:5px;
  width:0;
  height:0;
  border-top:4px solid rgba(255,255,255,.5);
  border-bottom:0 solid rgba(255,255,255,.5);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transition:border-bottom .1s, border-top .1s .1s;
  }

Bei deinen anderen Fragen kann ich was Genaueres sagen wenn man es sieht .

<ul id="menu">
    <li class="item"><a href="#">
        <input type="checkbox" id="check01"/>
        <label for="check01">Home</label>
        </a>
            <ul class="zu">
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
                <li><a href="#">item1.1</a></li>
            </ul>
    </li> </ul>

Mir ist nicht klar, wie ich das im CSS ansprechen und entsprechend stylen soll, wenn ich schon Label und input habe.

Das kannst du doch in dem Link sehen, den du gepostet hast . oder was meinst du da jetzt genau.

EDIT:
Ich habe mal eine 3 ebene click Variante gebaut mit den Checkboxen.
Jede Ebene ist schön bunt, damit du in der CSS den richtigen Code finden kannst. Damit kannst du dann sehen wie man ZB die einzelne ebene ansprechen kann.
Theoretisch kann man jeden Menüpunkt anders gestalten wenn man will.
Link zur Lösung

 

[Ansophie]

hey, mit deinem bunten pen ists schon ein bissl logischer, aber noch nicht ganz - der merge von deinem pen (#41), dem von Tont (#39) und meinem hat nur ansatzweise geklappt.

hier ist mein pen https://codepen.io/AnSophie/pen/vYYBvyV (ohne merger)

bitte nicht von der Vielzahl an /**/ im Code irritieren lassen - es ist wie gesagt ein Test und daher noch kein sauberer Code.

bin gespannt auf deine Rückmeldung.

lg,ansophie

 

[basti1012]

Dein Code hat ja jetzt überhaupt keine Checkbox mehr, ich dachte du wolltest das mit den machen ?
Die erste ebene solltest du ja hinbekommen mit den Beispiel was du gepostet hast https://codepen.io/Tont/pen/hdsev
mein letzes Beispiel sollte dir da auch helfen

der letzte Menü-Punkt in der Horizontalen geht 2 Ebenen tief. einmal runter und dann left: 100%. Leider liegt die 2. Ebene außerhalb des Browserfenster. Gibt es einen Trick wie ich das begrenzen kann?

Es wäre gut wenn du Code postest der auch zu deinen aussagen passt
Was wollst du den jetzt haben ? Ein Vertikales oder Horizontales Menü.

An besten baust du alles ein wie du es vor hattest und wenn du dann nicht weiter kommen tust kann man helfen,
Zum jetzigen Standpunkt würde ich dann ja alles einbauen und das ist nicht sinn der sache.

Mach mal das html fertig für die 3 Ebenn und die css wie weit du es kannst .
Dann ist es auch vieleicht einfacher zu verstehen was du genau vor hast

 

[Ansophie]

Ja ich hab das bewusst nicht reingeben, weil ich sonst alles wieder durcheinander wäre. Und du wolltest sehen wo ich steh. Und das ist ja was ich bis jetzt hab.

Die ebene mit checkbox versehen krieg ich wahrscheinlich hin.
Aber ich versteh nicht wie ich die checkbox dann von hamburger wegkrieg. Bis jetzt hätte ich das hamburger bezogene Label mit label.hamburg versehen, allerdings ist dann neben dem hamburger trotzdem noch das Dreieck vom anderen input zu sehen.

Horizontal haben wir ja im august gesehen, dass es nicht ganz so übersichtlich war, wie ich gehofft hatte. Daher möchte ich jetzt im großen viewport 1.zeile horizontal mit typischen vertikalen dropdowns. Im kleinen viewport eben vertikal.

 

[basti1012]

Ich verliere langsam den Überblick.
Ich habe jetzt bei deinem Code , alles an CSS herausgeworfen.
Es geht jetzt nur noch der Menüpunkt mit den roten Border.
Das ist mit Checkbox wie du wolltest. Alle anderen Menüpunkte gehen nicht mehr, aber das musst du ja sowieso alles ändern, wenn du da auch Checkboxen rein haben willst.

Zumindest solltest du jetzt sehen, wie das gehen sollte.
Noch was:
Du hattest dein Menü auf block gesetzt und beim Anklicken auf none. Normalerweise macht man es andersrum.
Deine CSS für den Hamburger passt auch alles irgendwie nicht zusammen.

Ich habe ja schon mal gesagt, dass dieses ganze hin und her kein Sinn macht. Such dir doch ein fertiges Menü und passe dir das an (notfalls helfen wir dabei).

Dein jetziges Menü weiter zubauen, wird wohl ein Fass ohne Boden. Ichs checke langsam nicht mehr was du genau vorhast und du bist noch nicht so weit, das komplett selber zu bauen.

Ich helfe dir ja gerne dabei , doch so langsam müssen wir hier mal zum Ziel kommen.

EDIT:
Link vergessen
Link zur Lösung

 

[Ansophie]

Danke für die Darstellung mit dem einzelnen Unterpunkt, ich glaub jetzt ist es schon viel klarer. Ich werd heute/morgen probieren das anzuwenden.

Was ich noch gern wissen würde, wieso schreibst du bei #hamburg left:-9999px; wenn display:none; ist?
Macht dieses left die body-flächengröße (weiß nicht wie das richtig heißt) nicht riesig? Es liegt ja dann sozusagen „etwas“ außerhalb des Viewports, man sieht es nicht, aber es ist da, nicht?

Ein großes Danke, dass du mir hilfst!!! Und ich gebe dir absolut recht, es wäre schön und beruhigend wenn ich das menü bald erledigt hab. Ich sitze jetzt bald wieder mehr als 2 wochen dran - frustrierend. Aber immerhin versteh ich mittlerweile mediaqueries und flex besser. ;)

Nach fertigen menüs hab ich geschaut (auf codepen und youtube und über google schlagwortsuche). ein paar hab ich eh ausprobiert. aber ich bin mit keinem sehr weit gekommen, weil keines so aussieht wie ichs gern hätte. Und viele sind nicht so gebaut, dass ichs leicht ändern könnt.

Ich tu mir halt schwer, bei nested lists im css.

Wo schaut ihr denn nach fertigen Menüs??

Lg

 

[basti1012]

Das ist schön das die Beispiele dir doch weiter helfen.
Dann bau mal schön und wenn du nicht weiter kommst dann sag bescheid wir werden das dann schon rocken.

Was ich noch gern wissen würde, wieso schreibst du bei #hamburg left:-9999px; wenn display:none; ist?
Macht dieses left die body-flächengröße (weiß nicht wie das richtig heißt) nicht riesig? Es liegt ja dann sozusagen „etwas“ außerhalb des Viewports, man sieht es nicht, aber es ist da, nicht?

Ehrlich gesagt habe ich mir da noch nie Gedanken rüber gemacht.
Ich würde jetzt sagen das

input{
    position:absolute;
    left:-9999px;
    opacity:0;
}

am richtgsten ist.

Ein Display:none würde ja nicht mehr anklickbar sein. Deswegen schiebt man sie weit weg damit man sie nicht mehr sehen kann. und 9999px ist größer als jeder Standart Monitor.
Opacity:0 macht die Checkbox durchsichtig,, sie wäre aber noch klickbar.

Da man aber nicht die Checkbox klickt ,sondern das label , funktioniert es auch wenn man nur display:none; benutzen tut.

Also kurz gesagt:::
Ich mache es aus gewohnheit, einen richtigen Grund weiß ich gerade auch nicht .
Vieleicht weiß wer anders das ja warum das so viele Leute machen ?

Wo schaut ihr denn nach fertigen Menüs??

In den meisten Fällen findet man bei Codepen was .
Falls da nix gefunden wurde würde ich einfach Goggel nutzen, irgendwie findet man immer was .
Das du nicht 100% dein Traum Menü findest ist meistens logisch, es kann nicht alles geben.
Ein Menü was so ähnlich ist wie deine vorstellungen hätte ja auch gereicht, das hätte man dann einfach geändert oder erweitert,

Aber so wie es jetzt ist lernst du mehr, als wenn du nur kopieren oder andere Menüs änderst