SLIDE-Menü verlässt kurzzeitig sein Gridelement

[einsiedler]

Moin liebe Forumer, bin am verzweifeln und komme da nicht weiter:

Mein "einsliderndes Menü" verlässt kurzzeitig sein Gridelement (nen kleines stück nach rechts) bevor das Menü schließlich nach links einfährt und das kann ich mir einfach nicht erklären.

Eventuell kann mir jemand von euch weiterhelfen.

So sieht es aus:

Die vertikale (rechte) Grundlinie müsste dort sein, wo das Menü zuletzt stoppt.

Es ist meine #global-nav , in grün eingezeichnet.

Vielleicht hilft das weiter:

Die Basis worauf sich alles stützt ist meine #conten-nav-box , es ist so eine Art " Gesamt-Inhaltsverzeichnis " welches mit details / summary sich öffnet (hier blau eingezeichnet).

Darauf fußt der seitliche ASIDE (worin sich der Seitenname und der Nach-oben-Button befindet, hier gelb dargestellt (siehe auch das: body) und das seperate Hauptmenü / ein Hamburger-Button / oben rechts

Alles irgendwie verschachtelt , wenn das mal nicht das Problem darstellt. Ich wollte diese Punkte irgendwie teilen, da bei meinen vorherigen Versuchen, wo beides noch zusammen war, der Seitenname immer mitzappelte und das ist unschön.

Gibt es da eine lösung, seht ihr da eine Lösung?

Achso, hier das LIFE - Beispiel [EDIT: Shortlink geändert in richtiges Linkziel]

(Wie gewohnt verlinke ich auf meinen BPlaced - Übungsspace, es passiert also NIX)

Was denkt ihr, wie geht man da ran?

Achso, schön fände ich es, wenn das Hauptmenü sticky stehen-bleiben würde, der Seitennamen kann mit dem scrollen ruhig nach oben rutschen.

Grüße der einsiedelnde

[JürgenB]

Hallo,

Achso, hier das LIFE - Beispiel

irgendwie sieht diese Seite anders aus als in deinen Screenshots.

Gruß
Jürgen

[einsiedler]

Hi, eventuell deswegen, da die Screens von einem 2160p Monitor gemacht wurden.

T.

[MudGuard]

Hi,

eventuell deswegen, da die Screens von einem 2160p Monitor gemacht wurden.

vermutlich eher, weil da nicht sofort die Seite kommt, sondern eine Antiphishing.biz Seite, auf der man sich als Nicht-Robot beweisen soll.

War mir ehrlich gesagt zu blöd. Hättest Du mal statt so einem Shortlink-Zeug direkt die richtige Url angegeben, dann hätte ich die Seite evtl. angeguckt.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

bei mir passiert noch was anderes: der Firmenproxy regt sich auf:

Die Zertifikatverifizierung ist in der Regel 'Block Self Signed Certificates' fehlgeschlagen.

Host: misanthrop.bplaced.net

Rolf

[einsiedler]

Tut mir Leid: LIFE - Beispiel ohne alles

Mit der Bitte um Unterstützung T.

[Gunnar Bittersmann]

@@einsiedler

Tut mir Leid: LIFE - Beispiel ohne alles

Ich habe den Link mal im OP geändert, auch bei „problematische Seite“. Letzteres wird allerdings nicht an die Antworten vererbt. Sollte es das?

Und ich hab deine gleichlautende Antwort an Rolf gelöscht; einmal reicht.

Jolan tru

[Rolf B]

Hallo Gunnar Bittersmann,

einmal reicht

Jo, aber die self-signed signature wird mir immer noch um die Ohren gehauen. Blöder Proxi 😟

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich habe den Link mal im OP geändert, auch bei „problematische Seite“. Letzteres wird allerdings nicht an die Antworten vererbt.

Bin jetzt alle Antworten durchgegangen und hab die „problematische Seite“ geändert.

Jolan tru

[Gunnar Bittersmann]

@@einsiedler

Mein "einsliderndes Menü" verlässt kurzzeitig sein Gridelement (nen kleines stück nach rechts) bevor das Menü schließlich nach links einfährt

Zunächst muss man erstmal dahin kommen, dass das Menü einfährt. Ich lande auf deiner Seite, drücke [Tab] und die Seite springt erstmal nach unten zum „Top“-Link. WTF‽ Der „Top“-Link sollte wohl ganz am Ende im DOM stehen.

Nochmal [Tab] gedrückt und die Seite springt wieder nach oben. Es ist nicht zu erkennen, welches Element gerade den Fokus hat:

Nochmal [Tab] gedrückt und die Fokusmarkierung liegt sowohl um „Inhalts-Übersicht“^[1] als auch um das Hamburger-Icon:

Ähm, wie öffnet man nun das Menü?

Spoiler: Das Hamburger-Icon hat den Fokus, wenn der blaue Strich daneben ist. Du solltest dafür sorgen, dass der blaue Rahmen um das Hamburger-Icon angezeigt wird.

Wenn „Inhalts-Übersicht“ den Fokus hat, sollte der blaue Rahmen nur darum sein, nicht das Hamburger-Icon mit einschließen.

Das Problem mit der Animation ist dein geringstes. Du solltest erst die anderen lösen, weil sich dabei vermutlich das Markup ändert.

Wo wir bei Markup sind:

<details>
  <summary>
    <div>
      <nav>…</nav>
      <nav>…</nav>
    </div>
  </summary>
</details>

Das sieht mir nach missbräuchlicher Verwendung des details-Elements aus, wenn schon alles in der summary steht.

Und warum zwei nav-Elemente? Das sollte wohl alles in einem stehen.

Jolan tru

---

1. Warum nicht „Inhaltsübersicht“ zusammengeschrieben? ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wo wir bei Markup sind: […]

Das sieht mir nach missbräuchlicher Verwendung des details-Elements aus, wenn schon alles in der summary steht.

Und warum zwei nav-Elemente? Das sollte wohl alles in einem stehen.

Und wenn du jetzt an sowas wie

<details>
  <summmary>☰</summary>
  <nav>…</nav>
</details>

denkst, ähm – ich denke, nein. nav sollte nicht in details stehen.

Das Hamburger-Icon sollte ein button sein – mit zugänglicher Beschriftung (die visuell versteckt werden kann):

<button>
  <span aria-hidden="true">☰</span>
  <span class="visually-hidden>Menü</span>
</button>

Öffnen/Schließen des Menüs mit JavaScript oder Popover_API.

Jolan tru

[einsiedler]

Guten Morgen,

[EDIT] Sorry, hatte fälschlicherweise nicht geantwortet, sondern in den Beitrag editiert. Matthias Scharwies [/EDIT]

Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so?

Codepen.io Verlinkung

Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem Button entsorechend content: " ☰"; & content: " ✖"; mitgibt.

Geht das?

Ja, wobei ein SVG (auch als Hintergrundbild) eben eleganter wäre.

Wäre das auch innerhalb eines GRID-Feldes anwendbar?

Was spräche dagegen?

Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch?

Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) NICHT barrierefrei, I know, trotzdem wird es noch gemacht.

Ein Artikel von 2010 0der 2020 wird nicht automatisch gelöscht. Das ist eben die Kunst, sich im Netz das Gute rauszusuchen.

HTML popover ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den anderen Browsern, da ist es irgendwie apprupter.

Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was?

• Infobox/Tooltips_mit_Popover

Da steht alles drin (Caniuse 89,9%, Polyfill, etc)

[Gunnar Bittersmann]

@@einsiedler

Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so?

Codepen.io Verlinkung

Da ist außer „No JS Menu reveal“ nichts zu sehen. Und bevor du sagst „doch!“, nein, schwarz auf dunkelgrau fällt unter „nichts zu sehen“.

Du möchtest du Hintergrundfarbe ändern‽

Und bitte nicht auf …/full/… verlinken, sondern auf …/pen/…, damit nicht jeder erst auf „View Source Code“ clicken muss. (Und Nicht-CodePen-Affine womöglich gar nicht darauf kommen, darauf clicken zu müssen.)

Nur frage ich mich ob

Und ich frage mich, auf welches Posting du hier geantwortet hast. Auf meins jedenfalls nicht.

Jolan tru

[Rolf B]

Hallo einsiedler,

das ist schon ziemlich tricky und liegt daran, wie sich deine Animationen überlagern.

(1) Das details-Element fährt von 0 auf 32ch auf (2) Der nav-wrapper hat eine Breite von 100% - 100% vom details-Element. Er verbreitert sich also auch von 0 auf 32ch (allerdings nicht die ch vom nav-wrapper, weil der eine andere font-size als das details-Element hat…) (3) Der nav-wrapper wird verschoben, von translateX(100% auf translateX(0%)

Und hier wird es spannend, denn der Prozentwert im translateX bezieht sich auf die Breite des Elements. Dadurch wächst die Breite des details-Elements linear, der Translate verändert sich aber quadratisch (weil die lineare Breitenänderung und die lineare Verschiebung sich multiplizieren). Und wenn Du von einer Parabel eine Gerade abziehst, gibt's genau diese Bewegung.

Wie man es RICHTIG macht, hängt davon ab, welche Bewegung Du Dir vorstellst. Ob ich es dann auch richtig hinkriege, kann ich spontan noch nicht sagen 😉

Rolf

[einsiedler]

Hallo, auch bei Dir, entschuldige Bitte meine sehr zeitverzögerte Antwort. Ja ich weiß, es muss noch anders funktionieren. Ich verlinke hier mal ein Codepen, schau mal:

CODEPEN.io Verlinkung

Ist dies jetzt schon einsetzbar? Oder noch zu früh?

Gute N8 T.

[Gunnar Bittersmann]

@@einsiedler

Hallo, auch bei Dir, entschuldige Bitte meine sehr zeitverzögerte Antwort. Ja ich weiß, es muss noch anders funktionieren. Ich verlinke hier mal ein Codepen, schau mal:

CODEPEN.io Verlinkung

Einmal reicht. Das hatten wir doch schon.

Ich sperre mal den Ast.

Jolan tru

[einsiedler]

Nabend, weiter gehts:

Ich habe alles ersteinmal stark vereinfacht zu meinem besseren Verständnis:

TEST 1: TEST 1 auf Bplaced.net - misanthrop

Habe ein zweispaltiges GRID konstruiert, rechts soll das Hauptmenü hin:

Meine Frage dazu:

Frage 1: Wäre es möglich das die blau umrandete Box mit seiner rechten Seite an der rechten Seite der gestrichelt orangenen Box anklebt (siehe den Pfeil!)?

Nicht wie jetzt, das er am linken orangenen Rand angepinnt ist. irgendwie möchte mir das nicht gelingen.

Problem dabei: Die blau umrandete Box ist position absolute.

Ich möchte etwas ausprobieren, dazu brauche ich diese Info.

b) Wie bekomme ich den Inhalt der blauen Box übereinander und auch getrennt?

TEST 2: TEST 2 auf Bplaced.net - misanthrop]

Hier habe ich nun versucht das Hauptmenü mit popover einzusetzen:

Hier der Link zur Einzeltestversion: PopoverHauptmenü bei Bplaced.net - misanthrop

Das wirkt schonmal ganz gut... was mir immer noch nicht gefällt und zwar nur bei Firefox ist, das wenn man das Menü schließt es einfach verschwindet und NICHT wie bei den anderen Browsern es langsam zurückslidert. Auch wenn ich den script-link zum Polyfill eingesetzt habe. Was stimmt da immer noch nicht.

b) Weshalb öffnet & schließt das Menü direkt am rechten Rand?

Das Menü dürfte doch im aside-GRID beheimatet sein. Was stimmt da nun wieder NICHT?

Da mein vorheriger Post editiert wurde und einige Fragen wegfielen:

Zum TAB-Skip

<nav id="tabskip" aria-label="Schnellnavigation">	   
     <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a>	
     <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a>
     <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a>    
     <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a>
	 <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a>
</nav>

Das habe ich nun direkt nach body eingefügt.

Wäre es so RICHTIG, das man erst dorthinspringt und beim zweiten TAB-betätigen der Link den blauen Rand bekommt?

Oder MUSS er sofort den blauen Rand erhalten.

Die Reihenfolge wie es bedient wird, wäre nun klar.

Gute n8

T.

[Matthias Scharwies]

Servus!

Nabend, weiter gehts:

Noch mal sorry wegen gestern.

Ich habe alles ersteinmal stark vereinfacht zu meinem besseren Verständnis:

TEST 1: TEST 1 auf Bplaced.net - misanthrop

Habe ein zweispaltiges GRID konstruiert,

Vereinfacht ist gut; Grid ist gut und vielfältig! Du bist auf dem richtigen Weg.

rechts soll das Hauptmenü hin:

Ich persönlich würde deine Webseite in 3 Teile auftrennen Kopf (header), Inhalt und Seitenfuß (footer).^[1] Die Navigation würde ich in den header packen. Dass sie ausgefahren kurzfristig Teile des Inhalts überdeckt, wäre für mich erwartetes Verhalten.

Frage 1: Wäre es möglich das die blau umrandete Box mit seiner rechten Seite an der rechten Seite der gestrichelt orangenen Box anklebt (siehe den Pfeil!)?

Antwort: Ja!

Das ist so eine nicht-Frage, die deine Posts aufbläht. Besser wäre es ein Ziel zu definieren:
Die blaue Box soll rechtsbündig an der orangen Box kleben. Wie kann ich das erreichen?

Nicht wie jetzt, das er am linken orangenen Rand angepinnt ist. irgendwie möchte mir das nicht gelingen.

Problem dabei: Die blau umrandete Box ist position absolute.

Du wolltest doch grid verwenden?
Lass mal das position:absolute weg und beobachte, was passiert!

Ich möchte etwas ausprobieren, dazu brauche ich diese Info.

Klar! Sonst hättest du nicht gefragt.

b) Wie bekomme ich den Inhalt der blauen Box übereinander und auch getrennt?

und hier steige ich schon wieder aus, denn ich weiß nicht, was du vorhast. HTML und Webseiten sind eben nicht blaue Boxen und rote Kreise, sondern Inhalt und Bedienelemente.
Der Inhalt des details-Elements wird untereinander angezeigt. Was möchtest du mit übereinander ausdrücken? Und was mit getrennt?

TEST 2: TEST 2 auf Bplaced.net - misanthrop]

Hier habe ich nun versucht das Hauptmenü mit popover einzusetzen:

Das wirkt schonmal ganz gut... was mir immer noch nicht gefällt und zwar nur bei Firefox ist, das wenn man das Menü schließt es einfach verschwindet und NICHT wie bei den anderen Browsern es langsam zurückslidert. Auch wenn ich den script-link zum Polyfill eingesetzt habe. Was stimmt da immer noch nicht.

Dass Popover noch neu ist und Firefox kein Geld hat, weil es (weltweit) nicht mehr so viele Nutzer gibt. Irgendwann rüsten sie diese Funktionaliät nach.

Das war auch bei details so, wofür es jetzt ::details-content(MDN) gibt, aber eben noch nicht für alle Browser.

Zum TAB-Skip

<nav id="tabskip" aria-label="Schnellnavigation">	   
     <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a>	
     <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a>
     <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a>    
     <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a>
	 <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a>
</nav>

Das habe ich nun direkt nach body eingefügt.

Wow; Das ist sehr umfassend (= viel zu komplex!)

Ich gehe auf eine Seite und habe 2 Möglichkeiten:

1. Die Seite von oben nach unten zu lesen und dabei viele nutzlose Infos überfliegen zu müssen, bis ich zur gewünschten Info komme.
2. Falls die Navigation zu umfangreich ist, möchte ich direkt zum Inhalt springen.
   Oder falls - wie früher mal üblich - die Navigation am Ende ist, möchte ich den Inhalt überspringen.

Du bietest mir 5 Möglichkeiten, was mich schon wieder verwirrt.^[2]

Du tätest dir selbst einen Gefallen, wenn du deinen neuen Ansatz konsequent verfolgtest:

Ich habe alles ersteinmal stark vereinfacht …

Wie fange ich an?/Von der Idee zum Projekt^[3]

Herzliche Grüße

Matthias Scharwies

---

1. header und footer wären auf jeder Seite identisch - du müsstest nur die aktuelle Seite mit aria-current="page" kennzeichnen. ↩︎

2. Für den Link zum "Rechtlichem" hast du die Navigation und den Footer; den brauchst du im „TabSkip“ nicht. ↩︎

3. Seitenaufbau, Inhaltsstruktur und Beschriftungen müssen so benutzerfreundlich sein, dass sie intuitiv erfasst und angewandt werden können. Dies können Sie testen, indem Sie unvoreingenommene Personen aus Ihrem Bekanntenkreis zu einem Test einladen.
   Geben Sie Ihnen Ziele vor (Impressum, Artikelsuche, Einkauf mit Bezahlvorgang, etc ) und beobachten Sie, welchen Weg die Tester nehmen und vor welchen Schwierigkeiten sie stehen. Man selbst ist oft betriebsblind und denkt, die von einem selbst entworfene Struktur wäre auch für andere leicht zu durchschauen. Wenn der Tester Inhalte nicht auf Anhieb findet, oder im Formular Schwierigkeiten hat, seine Daten einzugeben, merken Sie schnell, wo Sie etwas verbessern können. ↩︎