spieleprogrammierer.de - Forum und Wiki zur Spieleprogrammierung und Spieleentwicklung

Ich bin gerade dabei, ein mobiles Menü zu basteln. Dazu habe ich schon ein paar Dinge aus Tutorials umgesetzt, so dass es bereits die Funktionsweise hat, die ich haben möchte.

Testweise habe ich die Seite hier hochgeladen: Testseite

Macht man das Fenster schmäler, erscheinen die drei Balken für das mobile Menü. Beim Öffnen erscheinen drei Unterpunkte (Listenelemente). Um die weiteren Unterpunkte zu öffnen, gibt es das "+", das, wenn es nicht speziell positioniert worden wäre, einfach unterhalb von "Radsport" stünde, da dieses "+" ein div ist, das direkt nach dem Link "Radsport" steht. Ich habe nun durch position: relative versucht, dieses div da hin zu schieben, wo ich es haben möchte, was auch ganz gut klappt - allerdings bleibt da trotzdem eine Lücke.
Im Internet lassen sich dazu auch viele Tips finden (so wie das Verschieben durch negative margins, wie ich das gemacht habe, etc.), allerdings bringe ich damit die Lücke nicht weg.

Hat jemand eine Idee, wie ich das schaffe? Oder gibt es eine andere (einfache ) Möglichkeit, das so hinzubekommen, wie man sich so ein mobiles Menü eben vorstellt?

EDIT: Und mit einfach meine ich nicht, einfach etwas komplett fertiges oder einen Baukasten zu nehmen, auch wenn das natürlich einfach wäre. Sondern eben selbst geschrieben und so, dass ich es selbst verstehe, weshalb das nun so ist.

Danke für den Tipp, Michael, so funktioniert es. Wieso nimmt das Element aber praktisch keinen Platz ein, wenn ich es floate? Ich habe ja bei .topnav ul li die Listenelemente auch mit float: left, so dass sie im "normalen" Menü nebeneinander stehen (das nächste kommt so weit nach links, bis es am vorherigen anstößt).
Meinst du, mit Bildern für die "+", "-" und "Balken" Elemente wäre es besser? Ich habe das mit den Balken so in einem Tutorial gefunden und war davon recht begeistert, weil damit eben auch so eine Animation möglich war. Und die habe ich mir dann für das "+" und "-" selbst zusammengebastelt.

Zitat von »Michael«

Er meint wohl jene vertikale Lücke

Genau diese Lücke meinte ich, danke.

Über Grid Layouts habe ich schon etwas gelesen. Im Prinzip mach ich damit ja nur ein Raster und positionier die verschiedenen Elemente wie zB Menü, Hauptartikel, Footer, Sidebar und was man halt so alles möchte in jeweils eine Zelle. Für ein kleineres Fenster (mobile) muss ich dann nur das Raster anders anordnen, richtig?

Was ist da momentan der aktuellste Stand oder wird ein Flexbox Layout gleichermaßen wie ein Grid Layout eingesetzt? Gibt es dazu eventuell gute Tutorials oder ein Buch, das mir so Basics beibringt? Am besten wäre natürlich etwas mit praktischen Beispielen wie "ein Menü könnte man so und so gestalten", etc.

Zitat von »Schorsch«

Das Menü verschiebt den Content der Seite. Das ist denke ich nicht gewollt oder?

Richtig, das war auch nur ein Test. Mittlerweile habe ich es bereits auf meiner Seite eingebaut - funktioniert nun wie es soll, auch wenn es vielleicht noch nicht ganz top aussieht, tausend mal besser als zuvor aber allemal.
Codeacademy hat ein paar Tutorials, allerdings ist für einige davon leider eine kostenpflichtige Mitgliedschaft notwendig.

@H5:: Danke für die Liste, da kann ich mir bestimmt einige Tips holen

Ein gutes und modernes Buch zu dem Thema wäre super, denn das kann ich eventuell bei uns in der Bibliothek ausborgen, falls vorhanden. Super wäre soetwas im Stile von "C++ für Spieleprogrammierer", wo man auch so Dinge lernt wie ein Spiel besteht aus einer Schleife mit Render und Update, etc.