'Hamburger' mit HTML und CSS (ohne script)

UliHF · 26.08.2023

Hallo zusammen,
bin soeben auf ein gei... snippet gestoßen, das ich anderen 'Unwisssenden' nicht vorenthalten möchte.

Das Tolle daran ist u.a., dass es auf Anhieb sogar funktioniert hat

Der gesamte code hier in einer einzigen .html (nicht .text, da Editoren so besser mit dem Hervorheben klarkommen):

HTML:

<!--

      https://www.mediaevent.de/tutorial/css-responsive-menu.html

      and

      https://www.mediaevent.de/tutorial/css-transform.html

-->

/* HTML */
<div class="row">
   <input type="checkbox" id="hamburg">
   <label for="hamburg" class="hamburg">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
   </label>
  
   <nav class="topmenu">
      <ul>
         <li><a href="/tutorial/css-transform.html">Home</a></li>
         <li class="hassub">Submenü
            <ul>
               <li><a href="/css/css-selektor-kontextselektor.html">Selektoren</a></li>
               <li><a href="/css/breakpoints.html">Breakpoints</a></li>
            </ul>
         </li>
         <li><a href="/css/transitions.html">Transition</a></li>
         <li><a href="/html/input-checkbox.html">Checkbox</a></li>
      </ul>
   </nav>
</div>

/* CSS */
nav.topmenu {
    height: auto;
    max-height:0;
    overflow: hidden;
    transition: all 0.5s;
}

#hamburg:checked + .hamburg  + nav.topmenu {
    max-height: 600px;
}

label.hamburg {
   display: block;
   background: #555; width: 75px; height: 50px;
   position: relative;
   margin-left: auto; margin-right: auto;
   border-radius: 4px;
}

input#hamburg {display:none}

.line {
   position: absolute;
   left:10px;
   height: 4px; width: 55px;
   background: #fff; border-radius: 2px;
   display: block;
   transition: 0.5s;
   transform-origin: center;
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

Hat bei mir einwandfrei sofort funktioniert! (die CSS muss halt richtig platziert werden)

Wenn das jetzt noch 'sticky' oben rechts über dem header positioniert werden könnte (mit entsprechenden Z-Werten?), würde ich mich fast überschlagen

Das 'sticky' habe ich leider nicht geschaft (verstehe ja den code auch nur zu viell. 20%...)
Hoffe fest auf euch!

Viele Grüße
Uli

Sempervivum · 26.08.2023

Wenn das jetzt noch 'sticky' oben rechts über dem header positioniert werden könnte (mit entsprechenden Z-Werten?), würde ich mich fast überschlagen

Das lässt sich sicher leicht machen aber dafür müsste man mehr über den Header wissen:

Mit "Header" meinst Du wahrscheinlich nicht die Nav?
Wie soll der Header positioniert sein, eben falls sticky, d. h. er klebt oben beim Scrollen?

etc.

tk1234 · 26.08.2023

UliHF schrieb:
bin soeben auf ein gei... snippet gestoßen, das ich anderen 'Unwisssenden' nicht vorenthalten möchte.

Vergiss das Ding am Besten ganz schnell wieder: das Teil verwendet den Checkbox-Hack welcher nicht barrierefrei ist.

UliHF · 26.08.2023

Sempervivum schrieb:
Das lässt sich sicher leicht machen aber dafür müsste man mehr über den Header wissen

Mit "Header" meinst Du wahrscheinlich nicht die Nav?

Wie soll der Header positioniert sein, eben falls sticky, d. h. er klebt oben beim Scrollen?

etc.

Hatte das nicht ganz richtig dargestellt - der Header selbst bleibt erst mal als noch unvollständige Version völlig unabhängig von der (nur auf einzelnen Seiten zu verwendenden) zusätzlichen Hamburger-Navigation (genutzt nur für reine anchor-ids auf der Seite selbst).

Der Haupt-Nav Bereich ist ebenso davon völlig unabhängig zu behandeln.

Die 'stickyness' soll sich ausschließlich bzw. absolut am Viewport orientieren: ganz oben rechts. Für den Nutzer sieht das beim Landen auf der Seite nur so aus, als ob dieses Nav-Element Teil des Headers wäre.

tk1234 schrieb:
Vergiss das Ding am Besten ganz schnell wieder: das Teil verwendet den Checkbox-Hack welcher nicht barrierefrei ist.

Danke für den Hinweis! Bin leider nicht weit genug drin in der Materie, um solche zusätzlichen Schauplätze in der ersten Version ausreichend zu begreifen und entsprechend zu berücksichtigen...

Sempervivum · 26.08.2023

Um das Hamburger-Symbol sticky zu machen, verschiebst Du es am besten so, dass es ein direktes Kind von body ist. Dann musst Du auch das CSS anpassen, das die Verbindung zwischen der Checkbox und der Nav herstellt. Hier eine vollständige Demo:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Hamburger</title>
    <style>
        body {
            margin: 0;
        }

        /* CSS */
        nav.topmenu {
            height: auto;
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s;
        }

        /* Dies müssen wir anpassen nachdem wir
        die Position des Hamburger-Symbols verändert haben: */
        /* #hamburg:checked+.hamburg+nav.topmenu { */
        #hamburg:checked~div.row nav.topmenu {
            max-height: 600px;
        }

        label.hamburg {
            display: block;
            background: #555;
            width: 75px;
            height: 50px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            border-radius: 4px;
        }

        input#hamburg {
            display: none
        }

        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 55px;
            background: #fff;
            border-radius: 2px;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }

        .line:nth-child(1) {
            top: 12px;
        }

        .line:nth-child(2) {
            top: 24px;
        }

        .line:nth-child(3) {
            top: 36px;
        }

        #hamburg:checked+.hamburg .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }

        #hamburg:checked+.hamburg .line:nth-child(2) {
            opacity: 0;
        }

        #hamburg:checked+.hamburg .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }

        label.hamburg {
            position: sticky;
            top: 0;
            right: 0;
        }

        main {
            background-color: lightblue;
            height: 200vh;
        }
    </style>
</head>

<body>
    <input type="checkbox" id="hamburg">
    <label for="hamburg" class="hamburg">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </label>
    <div class="row">

        <nav class="topmenu">
            <ul>
                <li><a href="/tutorial/css-transform.html">Home</a></li>
                <li class="hassub">Submenü
                    <ul>
                        <li><a href="/css/css-selektor-kontextselektor.html">Selektoren</a></li>
                        <li><a href="/css/breakpoints.html">Breakpoints</a></li>
                    </ul>
                </li>
                <li><a href="/css/transitions.html">Transition</a></li>
                <li><a href="/html/input-checkbox.html">Checkbox</a></li>
            </ul>
        </nav>
    </div>
    <main>

    </main>
</body>

</html>

Das Verfahren mit "max-height"

Code:

        #hamburg:checked~div.row nav.topmenu {
            max-height: 600px;
        }

funktioniert so einiger Maßen aber mehr schlecht als recht, wenn man die Höhe animiert. Besser und präzise geht das mit Javascript.

UliHF · 26.08.2023

Das funktioniert auf meinem Rechner, danke! - nur sind wesentliche Aspekte der Positionierung andes als ich mir das im Layout so vorstelle bzw. wünsche. Die Verständigung und Anpassung von dort ausgehend wäre für mich mindestens genauso schwierig bis unmöglich wie vorher...

Wegen der vielen Variationsmöglichkeiten sehe für den Moment nur einen einzigen Weg, um dies noch in der ersten Version in das Blog auf der Seite 'Brotform' einzubauen.

Ausgehend von:
1) Bestand auf tmpblog8.ulrich-hauser.de
2) Hamburger derzeit direkt in der Seite 'Brotform' - nur auf dieser Seite soll/darf er erscheinen
3) er soll (bei ganz hochgescrollter Seite) 'schwebend' über dem Header (rotbraun) rechts positioniert sein und dort im Viewport kleben beiben beim Runterscrollen
4) zwei Quell-Arbeits-Dateien (viele Bemerkungen etc.) sind angehängt zum einfacheren Suchen nach den entscheidenden Details

Davon ausgehend käme ich mit euren entsprechenden Hinweisen viell. zum wirksam-machen des sticky-Attributs wie beschrieben. Es ist derzeit im label.hamburg {...} definiert.

Sempervivum · 26.08.2023

nur sind wesentliche Aspekte der Positionierung andes als ich mir das im Layout so vorstelle bzw. wünsche.

Genau deshalb vorher mein Hinweis, dass man mehr über das Drumherum wissen muss, um eine passende Antwort zu geben. Die Bedingungen sind zu unterschiedlich.

Sempervivum · 26.08.2023

Ich habe mir die Dateien jetzt angesehen. Die selbe Empfehlung wie zuvor: Das Hamburger-Symbol ganz oben im Body einhängen und die Adressierung der Nav entspr. anpassen.
Und wahrscheinlich ist für deine Zweck ein Positionierung mit fixed sinnvoller als mit sticky. Probiere beides aus, dann siehst Du den Unterschied und kannst entscheiden, was bei dir passend ist.

UliHF · 26.08.2023

Sempervivum schrieb:
... Das Hamburger-Symbol ganz oben im Body einhängen und die Adressierung der Nav entspr. anpassen.
Und wahrscheinlich ist für deine Zweck ein Positionierung mit fixed sinnvoller als mit sticky. ...

Das Einhängen im Body wäre ja erst mal ok.
Wie kann dann die Nav adressiert werden, so dass das Symbol ausschließlich auf der Seite Brotform erscheint? Dazu fällt mir bisher keine Methode bzw. Attribut ein - wahrscheinlich stehe ich auf der Leitung..

(position: fixed ist nach Vergleich der Definitionen sicherlich das für den Zweck passendere)

Sempervivum · 26.08.2023

Da das Symbol im HTML stehen muss, würde es nur auf der Seite Brotform erscheinen, wenn Du es dort im HTML einträgst und auf den anderen Seiten nicht. Jedenfalls wenn Du für jede Seite eine eigene vollständige HTML-Datei hast ohne z. B. Header und Footer mit PHP-Include einzubinden.
Edit: Oder soll das Ganze ein Onepager werden, alles steht in dem linken Container und wird über die Links angesteuert? In dem Fall müssten wir uns eine Maßnahme überlegen, wie das realisierbar ist.

UliHF · 26.08.2023

Verstanden - danke!
Da das Ding ohne scripts realisiert ist, existiert für jede Seite eine eigene, vollständige Datei. Werde das so versuchen.