Anfängerfrage zum "Hamburger Menü"

[Bernhard_4711]

Zunächst einmal ein freundliches "Moin" aus dem schönen Oldenburg!

Ich bin absoluter Anfänger auf dem Gebiet CMS und habe mir zum Einstieg das Buch dazu gekauft und fast ganz abgearbeitet (bin aktuell bei Kapitel 13). Anhand dieses Buches habe ich angefangen, mir eine Homepage zu erstellen. An etlichen Ecken hakt es noch, mir fehlt noch viel Verständnis von diesem_und_jenem (vor allem CSS verstehe ich nicht), aber das wird sich mit Sicherheit noch irgendwann geben.

Zu meiner im Betreff genannten Frage:

Beim sog. "Hamburger Menü" ist mir aufgefallen, daß zwar der Menü-Button mitwandert, wenn man auf der Seite scrollt, das Menü an sich aber stets an der oberen Kante der Seite "klebt". Sprich, wenn ich mitten auf einer Seite auf den Button tippe, kann ich das Menü nicht sehen, da es nach oben aus der Seite gewandert ist.

Bei contenido.org selber passiert das nicht...

Sollte diese Frage zu dumm sein, bitte Info. Auch, wenn das Thema schon behandelt wurde (habe aber nichts gefunden) oder noch im Buch behandelt wird und ich zu voreilig bin...

[homtata]

Hallo erstmal und willkommen im Forum!
Nun, die Frage ist nur anhand deines konkreten Quellcodes, CSS und JS zu beantworten. In irgendeiner Form spielen diese Dinge immer zusammen, wenn es darum geht, Elemente an bestimmten Punkten der Seite zu halten, was bei dir nicht der Fall ist. Zudem gibt es diverse Möglichkeiten, das Burger Menu zu erzeugen und zu steuern - mal über Bootstrap, mal händisch programmiert, oder über Dritt-Tools.
Sprich: ohne Kenntnis deines genauen Projekts ist es recht schwierig, dazu was qualifiziertes zu sagen...

[Bernhard_4711]

Moin,
naja, wie soll ich sagen? Ich habe halt das Buch von Markus Hübner abgearbeitet. Und da kommt auch das "Hamburger-Menü" drin vor... Mehr habe ich nicht gemacht.
Auf diesem Screenshot (ja, es ist aus o.g.Buch ) kann man sehen, daß zwar der "Hamburger-Menü"-Button bei stark verkleinertem Browser-Fenster auf seiner Position bleibt, egal, wie ich scrolle, das aufgeblendete Menü aber nach oben verschwindet:

Screenshot_20190728_114958.png (6.9 KiB) 3749 mal betrachtet

Leider habe ich die Zusammenhänge der vielen Teilbereiche noch nicht zur Gänze durchschaut, so daß ich die Fragen nicht beantworten kann.
Evtl. würde es ja reichen, wenn ich das Navigationsmenü an sich ebenfalls "fix" habe, es also nicht nach oben aus der Seite raus wandert. Ich habe auch davon einen Screenshot erstellt.
Anderer Denkansatz: Wenn man auf den "Hamburger-Menü" klickt, könnte auch ein automatischer Scroll der ganzen Seite nach oben das Problem lösen...

Screenshot_20190728_114557.png (139.62 KiB) 3749 mal betrachtet

P.S.: Das mit dem Bilder einfügen habe ich nicht verstanden...

[homtata]

Vielleicht kann dir Markus selbst dazu mehr sagen, der ist hier ja auch aktiv. Im Prinzip läufts aber darauf hinaus, dass auch das Menü irgendwie "fixiert" werden muss per CSS.
Ich arbeite viel mit Bootstrap (dort gibt es eingebaute Routinen für sowas, in die man sich etwas einfuchsen muss), ich habe aber auch viele Seiten mit einem jQuery-Plugin namens mmenu laufen, aber auch da gilt es einiges zu verstehen und aufzusetzen mit jQuery, CSS & Co.

[McHubi]

Hallo Bernhard,

freut mich, dass Du mein Buch gekauft hast und durcharbeitest!

Über kurz oder lang wirst Du nicht darum herum kommen, Dich näher mit 1. HTML, 2. CSS, 3. PHP und JavaScript zu beschäftigen.

Richtig, dass mit der Hauptnavigation in der mobilen Ansicht ist nicht ganz so doll. Da gibt's allerdings ein paar Dinge zu berücksichtigen, die sich - je nach Lösung - gegenseitig behindern würden.

1. Die Navigation wird - egal wo ich auf der Seite bin - genau dort eingeblendet.
Kann man machen, führt aber dazu, dass diese Box nicht scrollbar ist sondern festgenagelt bleibt - auch dann, wenn die Navigationspunkte vertikal nicht alle auf den Bildschirm passen. Das würde dann die Funktion wesentlich einschränken. Beim Hamburger-Icon ist das kein Problem, der hat ja eine fixe Größe. Man kann hier zwar auch wieder was mit JavaScript dengeln, aber dann würde man in dieser Navigationsbox zum Beispiel wieder einen weiteren vertikalen Scrollbalken haben. Alles so mit Vor- und Nachteilen.

2. Das, woran Du schon gedacht hast

Anderer Denkansatz: Wenn man auf den "Hamburger-Menü" klickt, könnte auch ein automatischer Scroll der ganzen Seite nach oben das Problem lösen...

Das lässt sich leicht bewerkstelligen.

Öffne dazu das Modul "head_js_general_backend_css" (wird im Verlauf des Buchs umbenannt, bzw. das anfängliche "head_js_general..." wird ergänzt) und schau Dir die Modul-Ausgabe an. Dort findest Du die function "show_hide". Die ergänzt Du um eine Zeile:

Code: Alles auswählen

function show_hide(var_element_id)
{
if(var_element_id=='navigation_main') window.scrollTo(0,0);

Mit der wird geprüft, ob die Hauptnavigation ein-/ausgeblendet werden soll (wird die Funktion für andere Elemente verwendet würde das ja ziemlich stören). Wenn ja, erfolgt ein Scrolling (ohne Animation) zum Seitenanfang.

Das hat zwar den Nachteil, dass man auf längeren Seiten - sofern man nicht auf eine andere Seite wechseln sollte - wieder runterscrollen müsste um dort weiterzulesen wo man war, allerdings bleibt die Box der Hauptnavigation scrollbar - und damit alle Navigationspunkte aufrufbar.

Ich schau mal, inwiefern ich noch eine bessere Lösung einstelle.

Wie Homtata schon schrieb

Ich arbeite viel mit Bootstrap (dort gibt es eingebaute Routinen für sowas, in die man sich etwas einfuchsen muss), ich habe aber auch viele Seiten mit einem jQuery-Plugin namens mmenu laufen, aber auch da gilt es einiges zu verstehen und aufzusetzen mit jQuery, CSS & Co.

Auf diesen Aspekt bin ich im Buch ja auch eingegangen.

Viele Grüße

Markus

[McHubi]

Hallo Bernhard,

Ich schau mal, inwiefern ich noch eine bessere Lösung einstelle.

Mach mal bitte folgendes:

1) falls Du die function show_hide um das Scrolling zum Seitenanfang ergänzt hast, nimm die Zeile mal wieder raus.
2) öffne die standard.css und nimm in der mediaquery für die max-width von 39em diese Anpassung vor:

Code: Alles auswählen

#navigation_main {
background-color: #ffffff;
border-right: 1px solid #484903;
border-bottom: 1px solid #484903;
position: fixed;
top: 0em;
left: 0em;
z-index: 1000;
display: none;
padding: 0.5em;
font-size: 1.6em;
width: 80%;
max-height: 100%;
overflow-y: auto;
}

Die position wird von absolute auf fixed geändert, die letzten beiden Zeilen kommen neu hinzu und setzen die Höhe der Box auf maximal 100%. Ist der Inhalt höher, sprich er passt nicht mehr in das Browserfenster, wird die Box vertikal auf der y-Achse scrollbar.

Das dürfte genau das sein, was Du suchst.

[Bernhard_4711]

Moin Markus (muß immer aufpassen; mein Sohn heißt Marcus mit "c"),

freut mich, dass Du mein Buch gekauft hast und durcharbeitest!

...habe fertig...

Über kurz oder lang wirst Du nicht darum herum kommen, Dich näher mit 1. HTML, 2. CSS, 3. PHP und JavaScript zu beschäftigen.

Ja, das ist mir klar! Es ist nur so viel Neues im Gegensatz zu meinen bisherigen Gehversuchen mit 0815-HTML. Eine private Seite habe ich Anno-Dunnemals erstellt, die aber mit o.g. 0815-HTML und minimalem Einsatz von JavaScript läuft.

Fazit: Bis meine Idee von einer ordentlichen Webseite läuft, habe ich noch viel Arbeit vor mir und mit Sicherheit auch viele Fragen. Ich hoffe, das nervt auf Dauer nicht zu sehr...

Etwas später: Der Ansatz mit der Änderung der standard.css funktioniert auf den ersten Blick 1a! (THUMBS_UP)

[McHubi]

Der Ansatz mit der Änderung der standard.css funktioniert auf den ersten Blick 1a!

Freut mich!