nicht angemeldet einsiedler
JürgenB
einsiedler
MudGuard
Rolf B
einsiedler
Gunnar Bittersmann
Rolf B
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
Hallo,
Achso, hier das LIFE - Beispiel
irgendwie sieht diese Seite anders aus als in deinen Screenshots.
Gruß
Jürgen
Hi, eventuell deswegen, da die Screens von einem 2160p Monitor gemacht wurden.
T.
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
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
Tut mir Leid: LIFE - Beispiel ohne alles
Mit der Bitte um Unterstützung T.
@@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
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
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
@@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 Verwndeung 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
Warum nicht „Inhaltsübersicht“ zusammengeschrieben? ↩︎
@@Gunnar Bittersmann
Wo wir bei Markup sind: […]
Das sieht mir nach missbräuchlicher Verwndeung des
details-Elements aus, wenn schon alles in dersummarysteht.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
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