Fragen zum Hamburger Button

[Gabriele]

Moin,

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

[Gunnar Bittersmann]

@@Gabriele

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

Wegen display: none.

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Mit anchor positioning.

🖖 Live long and prosper

[Gabriele]

Mit anchor positioning.

Das dortige Beispiel zeigt aber das Aussehen von Tooltipps, in der Art einer Sprechblase:

Ist diese Methode wirklich zum Aufklappen von Untermenus geeignet?

[JürgenB]

Hallo,

Mit anchor positioning.

Das dortige Beispiel zeigt aber das Aussehen von Tooltipps, in der Art einer Sprechblase:

Ist diese Methode wirklich zum Aufklappen von Untermenus geeignet?

da wird auf Knopfdruck etwas aufgeklappt …

Gruß
Jürgen

[Gabriele]

Hallo,

da wird auf Knopfdruck etwas aufgeklappt …

Was aufgeklappt wurde, habe ich ja in meinem Beitrag gezeigt. Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

[JürgenB]

Hallo,

Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

nein, aber bei popover auch nur auf Wunsch. Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

Gruß
Jürgen

[Gabriele]

Hallo,

Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

nein, aber bei popover auch nur auf Wunsch. Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

[JürgenB]

Hallo,

Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

in diesem Tutorial werden popover und anchor behandelt. Die Tooltips sind da nur ein Beispiel. Letztendlich geht es darum, bei Knopfdruck ein Fenster (popover) unter einem Knopf (anchor) zu öffnen.

Was hast du an diesem Tutorial denn nicht verstanden?

Gruß
Jürgen

[Gabriele]

Hallo,

Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

in diesem Tutorial werden popover und anchor behandelt. Die Tooltips sind da nur ein Beispiel. Letztendlich geht es darum, bei Knopfdruck ein Fenster (popover) unter einem Knopf (anchor) zu öffnen.

Was hast du an diesem Tutorial denn nicht verstanden?

Z.B. Was .hinweis und kbd bewirken. Wenn ich sie lösche, ändert sich am Ergebnis nichts.

[JürgenB]

Z.B. Was .hinweis und kbd bewirken. Wenn ich sie lösche, ändert sich am Ergebnis nichts.

an welchem Kapitel?

Gruß
Jürgen

[Gabriele]

Hallo,

Aber Dornen nach unten/oben sind doch in Auswahlmenüs nicht üblich.

Hast du dir den Quelltext oder meine anderen Links und deren Quelltext mal angesehen?

Ja ich habe den Quelltext gelesen, aber viel davon verstehe ich nicht😉

Und jetzt habe ich noch dies gefunden!

Meine Verwirrung ist komplett😞!

Bekannt sind mir daher die

• Varianten mit HTML, CSS und Javascript
• Varianten mit HTML, CSS
• Varianten mit HTML

Muss man erst 6 Semester Informatik o.ä. studieren oder wochenlang Selfhtml lesen, um die beste Variante für seinen Bedarf herauszufinden😕?

[JürgenB]

Hallo,

Und jetzt habe ich noch dies gefunden!

Meine Verwirrung ist komplett😞!

du hast dich jetzt in meinem persönlichen Bereich im Wiki verirrt. Hier findest du u.A. die Beispielseiten, die ich gebastelt habe, um die popover- und die anchor-Technik zu verstehen.

Bekannt sind mir daher die

• Varianten mit HTML, CSS und Javascript
• Varianten mit HTML, CSS
• Varianten mit HTML

ich vermute, du meinst Varianten für eine Navigation mit Klappmenü. Ja, da gibt es diverse Varianten. Die mit popover und anchor ist neu, bzw. bei uns in der Entwicklung. Aber popover und anchor sind unabhängige Techniken. Du kannst auch ein Menü mit Javascript öffnen und mit anchor positionieren. Welches die beste Variante ist, hängt vom Anwendungsfall ab. Aber wolltest du nicht am Ende eines Textes nur ein paar weiterführende Links einblenden? Oder verwechsele ich da etwas?

Muss man erst 6 Semester Informatik o.ä. studieren oder wochenlang Selfhtml lesen, um die beste Variante für seinen Bedarf herauszufinden😕?

Wenn du dich mit einem Site-Menü beschäftigst, ist das eher etwas für Fortgeschrittene, etwas in der Nähe eines Buttons einblenden ist da schon einfacher. Da passt unser Tooltip-Tutorial schon. Du solltest aber schon so viel von den Grundlagen verstanden haben, dass du das Aussehen der Tooltips an deine Wünsche anpassen kannst.

Aber ich frage jetzt mal nach: Warum machst du das?

Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

Soll Webdesign dein Beruf werden?

Oder aus ganz anderen Gründen?

Gruß
Jürgen

[Gabriele]

Hallo,

Aber ich frage jetzt mal nach: Warum machst du das?

Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

Ich möchte mehrere private Seiten erstellen, aber diese mit modernster Technik, die von den "großen" Browsern verstanden wird.

Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

Gruß
Gabriele

[Der Martin]

n'Abend Gabriele.

Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

dann willkommen im Club. Die meisten SELFHTML-Vereinsmitglieder sind 50+, und auch unsere "Laufkundschaft" ist eher im reiferen Alter.

Also so gesehen bist du hier genau richtig. 😁

Einen schönen Tag noch
 Martin

[JürgenB]

Hallo

Hallo,

Aber ich frage jetzt mal nach: Warum machst du das?

Willst du nur einmal eine eigene Seite erstellen und dann brauchst du html/css/javascript nicht mehr?

Ich möchte mehrere private Seiten erstellen, aber diese mit modernster Technik, die von den "großen" Browsern verstanden wird.

Bist du eine Praktikantin, die gerade im Bereich Webdesign steckt und in ein paar Wochen was anderes macht.

Nein, ich bin Rentnerin und daher nicht mehr so aufnahmefähig wie ihr Selfhtml-er.

ok, dann hast du ja Zeit (auch wenn bei uns (!) Rentnern die Restlaufzeit begrenzt ist 😀), dir die Grundlagen in aller Ruhe anzueignen und dich durch die Anfängerkapitel und Beispiele durch zu arbeiten. Mit „hier und da mal was rauskopieren“ kommst du nicht weit.

Zum Alter: mit popover und anchor habe ich Anfang diesen Jahres das erste Mal Kontakt gehabt. Auch Rentner sind vom „lebenslangen Lernen“ nicht befreit.

Gruß
Jürgen

[JürgenB]

Hallo Gabriele,

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

dein Versuch, im Button die drei Linien zu animieren scheitert daran, dass da nichts zum animieren ist. Warum eigentlich drei span als Linien? Es gibt für den Hamburger ein Unicode-Zeichen.

Die andere Animation beißt sich mit dem Umschalten display: none / block

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Dafür bietet sich die Anchor-Technik an. Hier (https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor) ist die Testversion einer Navigation mit Popover- und Anchor-Technik. Die Positionierung funktioniert z.Zt. nicht im Firefox, aber da werden die (Unter-)Menüs eben nicht unter den Button angezeigt.

Es gibt auch einen Polyfill für die Anchor-Technik, aber da ist die Verbindung zwischen Anchor und Element etwas aufwändiger, siehe https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Test_der_anchor-Technik

Gruß
Jürgen

[Gunnar Bittersmann]

@@Gabriele

1. In dem Beispiel

<button id="hamburger-toggle" class="hamburger-button" aria-label="Menü öffnen/schließen">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</button>

Wo haste denn den Unsinn her? HTML-Elemente zum Zeichen von Figuren?^[1]

Das geht mit SVG, kuckst du. Oder mit Unicode-Zeichen.

Anstatt aria-label bietet sich für die zugängliche Beschriftung ein visuell verstecktes Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird.

Mit dem aria-expanded-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Beschriftung ausreichen sollte – ohne „öffnen/schließen“.

🖖 Live long and prosper

---

1. In der CSSBattle macht man das. Aber das ist hier nicht das Thema. ↩︎

[JürgenB]

Hallo Gunnar,

Anstatt aria-label bietet sich für die zugängliche Beschriftung ein visuell verstecktes Element an. Das hat den Vorteil, dass der Text im Elementinhalt ist, nicht im Attributwert, und von automatischen Übersetzern auch übersetzt wird.

Mit dem aria-expanded-Attibut sollte der Button geschwätzig genug sein, sodass „Menü“ als Beschriftung ausreichen sollte – ohne „öffnen/schließen“.

und mit popover kann man auf das Aria-Zeug verzichten, da ist das doch schon drin, oder?

Gruß
Jürgen

[Gabriele]

Moin,

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

Erledigt

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Erledigt, aber: Wie kann man das aufgeklappte Menu mittig unter dem Button positionieren?

Gruß Gabriele

[Winfried]

Hallo Gabriele

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

<div style="text-align:center;">
  <button id="open-popup-button">Öffnen</button>
</div>
  
<div id="my-popup" style="display: none; position: absolute;">
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetuer</li>
  <li>adipiscing elit</li>
  <li>sed diam nonummy nibh euismod</li>
</ul>  
</div>

<script>
function positionPopup() {
    const button = document.getElementById('open-popup-button');
    const popup = document.getElementById('my-popup');
    
    // Die Position und Größe des Buttons im Viewport ermitteln
    const rect = button.getBoundingClientRect();

    // Die Mitte des Buttons berechnen
    const buttonCenter = rect.left + rect.width / 2;

    // Das Pop-up positionieren:
    // top: Unter dem Button + etwas Abstand (z.B. 10px)
    popup.style.top = `${rect.bottom + 10}px`;
    
    // left: Der Mittelpunkt des Buttons
    popup.style.left = `${buttonCenter}px`;

    // Zentrieren des Pop-ups anhand seiner eigenen Breite mit CSS Transform
    popup.style.transform = 'translateX(-50%)'; 
}

// Beim Öffnen des Pop-ups die Funktion aufrufen
document.getElementById('open-popup-button').addEventListener('click', () => {
    document.getElementById('my-popup').style.display = 'block';
    positionPopup(); 
});
</script>

[Gabriele]

@@Winfried, @@Selfhtml-Gemeinde

Hallo Winfried,
danke für den Tipp.

Ich habe inzwischen in KI einige Anfragen zu Flex- und Gridstrukturen gestellt.

Meine bisherigen Anfragen wurden zu 100% richtig beantwortet, einschließlich komplettem CSS/HTML-Code.

Ich fürchte, dass SELFHTML schon in Kürze obsolet wird oder nur noch als Input für KI-Systeme dient.

Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang den oft ausschweifenden Text in Selfhtml lesen zu müssen, werde ich mich jetzt tatsächlich von KI helfen lassen.

Den Helfern in Selfhtml möchte ich aber für Ihre Geduld danken.

Tschüs Gaby

[Gunnar Bittersmann]

@@Gabriele

Hallo Winfried,
danke für den Tipp.

Nur dass die Antwort nicht zu deiner Frage passte.

Ich habe inzwischen in KI einige Anfragen zu Flex- und Gridstrukturen gestellt.

Meine bisherigen Anfragen wurden zu 100% richtig beantwortet, einschließlich komplettem CSS/HTML-Code.

Welche KI verwendest du? Doch nicht etwa ChatGPT? Das Ding ist saudumm und verlogen – eben noch mal getestet.

Sagen wir so: Deine bisherigen Anfragen wurden zu 100% beantwortet. Ob sie gut beantwortet wurden, vermagst du nicht zu beurteilen.

Ich fürchte, dass SELFHTML schon in Kürze obsolet wird oder nur noch als Input für KI-Systeme dient.

Dass die Anzahl der Fragen hier im Forum immer weiter abnimmt, mag auch mit dem Aufkommen von KI zu tun haben. Und dass viele einfach alles glauben, was KI so ausspuckt.

Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang den oft ausschweifenden Text in Selfhtml lesen zu müssen,

Schnell mal etwas zusammenzuschustern auf der einen Seite und zu lernen, wie man’s richtig macht, auf der anderen, sind zwei verschiedene Dinge. Oftmals gegensätzliche.

werde ich mich jetzt tatsächlich von KI helfen lassen.

Wenn altertümlicher Code für dich gut genug ist … Denn von neuen Features in HTML und CSS hat KI nicht die blasseste Ahnung.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Winfried

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

Nein, das tut es nicht:

Ich habe lediglich bei dem div um den Button style="text-align:center;" entfernt (Codepen). Gabrieles Anforderung ist: „egal wo sich letzterer [der Button] befindet“.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Winfried

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Folgendes einfache Beispiel hat mir KI ausgespuckt, und es funktioniert!

Abgesehen davon, dass es nicht funktioniert, wird da ein Haufen JavaScript verwendet, wo man genau gar kein JavaScript braucht. Das geht mit CSS, wie ich vor einer Woche schon sagte.

☞ Codepen

Aber davon weiß die Ki wohl noch nichts, weil sie keine blasse Ahnung von CSS hat. S.a. meine Unterhaltung mit ChatGPT.

(Ergänzung: ein neuer Versuch)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das geht mit CSS, wie ich vor einer Woche schon sagte.

☞ Codepen

Die Variante hätte ich auch schon vor einer Woche anbieten können. Da sie aber keine Lösung für das Problem „egal wo sich [der Button] befindet“ ist, hatte ich das nicht getan.

Jetzt habe ich aber doch noch eine Lösung gefunden: ☞ Codepen 1

Oder von der anderen Seite: ☞ Codepen 2

🖖 Live long and prosper

Nachtrag: Meine Versuche, auf transition zu verzichten und die halbe Breite stattdessen mit in die Berechnung von clamp() zu ziehen, schlugen fehl. ☞ Codepen 1a

left: calc(anchor(center) - <length>) kann man machen; clamp(<length>, anchor(center) - <length>, <length>) aber nicht? Übersehe ich da was? Oder ist das noch nicht in Browsern implementiert?

[Matthias Scharwies]

Hallo Gabriele,

ich lese seit Samstag mit und will jetzt versuchen, dir das Tutorial im Wiki schmackhaft zu machen:

• Navigation/Flyout-Menü
  • CSS-flyout3.html

Es erklärt, wie man eine Flyout-Navigation erstellt, die barrierefrei und benutzerfreundlich ist.

Dabei wird auch gezeigt, wie man heute ein Hamburger-Icon erzeugt:

• Toggle-Design:_Navicon

Das Tutorial ist vor 2 Jahren zum letzten Mal aktualisiert worden und öffnet die Links deshalb mit JavaScript. Das ist nicht falsch, wird in ein paar Jahren aber nicht mehr nötig sein.

Am Ende findest du eine Variante mit details/summary, die die Linkliste direkt unterhalb des Nav-Icons öffnet.

Popover und Anchor positioning werden da bald eine Alternative - die Positionierung geht derzeit aber noch nicht im Firefox.

1. In dem Beispiel wollte ich die Dauer des Öffnens des Menus testweise auf 3 Sekunden einstellen.
   Warum klappt dies nicht?

Die Frage ist eher, ob das benutzerfreundlich ist. Normalerweise will ich die Linkliste sofort sehen.

2. wie kann ich erreichen, dass das aufgeklappte Menu immer unter dem Hamburger Button steht, egal wo sich letzterer befindet?

Siehe die entsprechende Stelle im Tutorial.

Die ul befindet sich unterhalb des buttons, deshalb ist auch dort psoitioniert. Man könnte die ul oberhalb des Texts darstellen, dann wäre dieser aber im geöffneten Zustand verdeckt.

Herzliche Grüße
Matthias Scharwies