Erstellen eines Hamburger Menüs

Fridoya schrieb am 06.12.2018 um 02:29 Uhr

Ich bin wieder einmal auf "Hilfesuche"...

Ich möchte von einer mit dem Web Designer 15 Premium erstellten Website eine Smartphone Version erstellen und dort ein "Hamburger Menü" einfügen (im Forum habe ich keinen entsprechenden Thread gefunden). Ich hoffte, in der Design-Galerie etwas Passendes zu finden, doch wurde ich nicht fündig. Ich dachte, ich könnte den "Hamburger" ja selber kreieren und ihn mit einer Navigationsleiste verlinken - oder geht das alles viel einfacher? Ich müsste ja dann bei der Original-Website eine zusätzliche (leere) Seite einfügen, denn - so habe ich es verstanden - wird mir jeweils die entsprechende Seite der Original-Website in der Smartphone-Version angezeigt, so dass ich jene Seite dann entsprechend bearbeiten kann. Mit der Verlinkung auf das Menü gäbe es ja eine zusätzliche Seite. Denkfehler?

Herzlichen Dank für eure Hilfe!

Kommentare

BilderMacher schrieb am 06.12.2018 um 05:37 Uhr

Hallo,

in den TUTORIALS findest Du von @marboe ein PDF, was erklärt, wie es gehen kann.

HIER lesen...

Viel Erfolg!

Wenn Du dir eine Vorlage mit Smartphone-Variante mal genauer ansiehst, wirst du sehen, wie das "Hamburger Menü" zusammengebaut wurde.

Auch im SUPPORT-Bereich findet man über die SUCHE etwas dazu.

Zuletzt geändert von BilderMacher am 06.12.2018, 05:43, insgesamt 2-mal geändert.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

Fridoya schrieb am 06.12.2018 um 13:01 Uhr

Hallo BilderMacher

Ich danke dir herzlich für deine Antwort mit dem Hinweis auf @marboes PDF zu diesem Thema. Wie alles, was von marboe kommt, ist diese PDF äusserst hilfreich – ungeachtet meines Erstaunens darüber, dass die Sache doch nicht ganz so einfach ist, wie ich sie mir vorgestellt hatte. Zumindest wird sie mehr Zeit in Anspruch nehmen als von mir geglaubt. Mal schaun, ob ich’s hinkriege.

Ich wünsche dir einen guten Tag,  liebe Grüsse, Fridoya

 

BilderMacher schrieb am 06.12.2018 um 20:50 Uhr

Im Grunde eine lösbare Aufgabe.

Das Grundgerüst sind eine Rechteckform (aus 3 Balken, gruppiert) und ein Text-Objekt (es genügt ein Zeichen, der Punkt).

Zusammen übereinander, gruppiert, lässt sich nun das Menü erstellen.

Zuletzt geändert von BilderMacher am 07.12.2018, 05:27, insgesamt 1-mal geändert.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

Fridoya schrieb am 07.12.2018 um 23:53 Uhr

Danke, BilderMacher, für deine weiteren Erklärungen, ich werde morgen versuchen, alles umzusetzen. Schönes Wochenende!

marboe schrieb am 08.12.2018 um 07:30 Uhr

Ich hoffte, in der Design-Galerie etwas Passendes zu finden, doch wurde ich nicht fündig.

Genau da findest du es auch.
Leider haben die Entwickler es versäumt, ein solches Menü unter "Navigationsleisten" oder "Buttons" zu hinterlegen. Aber natürlich kannst du eine Vorlage mit Smartphone-Variante öffnen und es da herauskopieren.

Oder du kannst schauen unter Symbolen; wie ich schon geschrieben habe.
Unter dem Stichwort "bars" wirst du in deiner Version fündig.

Oder du kannst es selbst zeichnen.
Aber Vorsicht: deine selbsterstellte Datei wird definitiv größer in Bezug auf die Ladezeit.
Allerdings kannst du dich hier designmäßig austoben und hättest nix von der Stange 😁.

Viel Erfolg! Gruß marboe

Fridoya schrieb am 08.12.2018 um 17:21 Uhr

Hallo Marboe!

Danke für deine Ergänzungen – und für die super PDF! Das Handbuch ist für mich manchmal etwas frustrierend, es scheint mir eine Aufzählung dessen, was möglich ist, Details über die Ausführungen findet man dort aber eher weniger. Deshalb bin ich sehr froh über deine Step-by-Step-Anleitung. Die „bars“ habe ich in der Design-Galerie gefunden, ich habe unter „Navigationsleisten“ am falschen Ort gesucht.

Das nächste Problem bezüglich Smartphone-Version brennt schon unter den Nägeln, aber dafür werde ich dann eine neue Frage stellen, weil es nicht zu diesem Thema passt.

Ich wünsche dir einen entspannten Sonntag – vom Wetter her ist er ideal, um an der Navigationsleiste für meine Smartphone-Version herumzupröbeln… - was könnte man auch sonst anderes tun?😉

Liebe Grüsse, Fridoya

SteAl1988 schrieb am 06.09.2019 um 05:58 Uhr

Hallo Bildermacher, Hallo marboe,

Danke für eure Unterstützung und das Tutorial in PDF-Form. Leider bringt es mich nicht so sehr weiter. Grundsätzlich habe ich es verstanden, aber irgendwas funktioniert noch nicht richtig, oder es funktioniert nicht, weil meine Website anders aufgebaut ist als im Beispiel.

Ich nenne euch nun mal die Fehler, die ich in meinem Fall entdeckt habe:

- Beim Aufruf des Menüs sieht der erste Punkt komisch aus. Der Balken hat links und rechts weiße Blöcke.

- Beim Touch auf Menüpunkte schließt sich das Menü gerne mal.

- Das Burger-Menü lässt sich nicht immer öffnen.

- Die Abstände zwischen den Menüpunkten sind nicht immer gleich (erster und letzter Punkt haben schätzungsweise 1px Abstand zu den anderen).

Kann ich einem von euch mal die Subdomain meiner Website zukommen lassen? Bin nämlich schon einige Zeit am Probieren, aber nix hilft. Und da ich die Website für meine Bewerbungen nutzen will, wäre es toll, wenn es auch funktioniert. Bin schon am Verzweifeln :-/

Ich bin mir sicher, dass ihr mit einem Blick erkennt was falsch ist bzw. ob es an dem Aufbau meiner Website liegt.

Würde mich mega freuen und mich auch irgendwie revanchieren, falls sich was anbietet.

Liebe Grüße :-)

P.S.: @marboe: In der Beispieldatei sind noch die Login-Daten fürs Webhosting gespeichert. Natürlich nicht mit klarem Passwort, aber mit sonst allem.

marboe schrieb am 06.09.2019 um 07:53 Uhr

Leider bringt es mich nicht so sehr weiter

@SteAl1988

Das ist sehr schade. Denn noch ausführlicher kann ich zumindest es dir nicht erklären.

Du beziehst dich auf das PDF-Tutorial welches oben verlinkt ist. Der Threadersteller wollte aber ein Hamburger Menü ohne PopUp-Navi, wenn ich das richtig sehe.
Somit antwortest du hier im ungeeigneten Thread. Deine Frage wäre unter dem Tutorial besser aufgehoben gewesen.

 

Beim Aufruf des Menüs sieht der erste Punkt komisch aus. Der Balken hat links und rechts weiße Blöcke

Dann hast du nicht sauber gearbeitet. Du kannst entweder selbst etwas kreieren oder das vorhandene aus der Vorlage ersetzen. Die Breiten von Objekten sollten natürlich gewahrt werden um genau das zu verhindern. Vielleicht hat dein Objekt einen Rand oder Transparenzen oder oder ...

Die Abstände zwischen den Menüpunkten sind nicht immer gleich

S.o. hier scheint sich der gleiche Fehler fortzusetzen.
Beachte: es gibt in den Grundeinstellungen des WD die Möglichkeit, beim Duplizieren den Versetzungsgrad der neuen geklonten Objekte anzugeben. Vielleicht hast du hier nicht achtsam genug gearbeitet.
Der WD gibt dir beim Druntersetzen von Rechtecken ja einiges an optischer Hilfestellung in Form von farbigen Linien (natürlich hilft es auch, wenn man den Magnetismus einschaltet).

Kann ich einem von euch mal die Subdomain meiner Website zukommen lassen?

Du kannst - und solltest - die URL hier im Forum veröffentlichen. Mehr Augen sehen auch mehr. Abgesehen davon, dass du ja eh eine Seite für das WWW erstellst. Was also in die Welt soll, darf auch hier ins Forum.

P.S.: @marboe: In der Beispieldatei sind noch die Login-Daten fürs Webhosting gespeichert.

Ja, das ist leider so. Es ist mir nicht gelungen dies dauerhaft aus der Datei zu entfernen.
Speichern unter neuem Namen, wie man das üblicherweise macht, führt hier nicht zum Erfolg.
Ist aber nicht so schlimm, in dem Ordner kann man nicht so viel anrichten 😉
Dennoch danke, dass du an die Sicherheit denkst und aufmerksam warst!

Mein Fazit: deine Probleme sind nicht reproduzierbar.
Entweder brauchen wir wesentlich mehr Infos oder erst mal einen Link.
Ich habe keine gezielte Idee, was du da falsch gemacht haben könntest. Ohne Zweifel ist der Aufbau dieser Navigation aber recht komplex und erfordert einiges an Konzentration. Raten würde ich dir, in einer neuen Datei nochmal von vorne anzufangen um mitgeschleppte Fehler zu eliminieren. Erst wenn die Navi im separaten Projekt richtig läuft, sollte man sie in die eigentliche Projektdatei einbauen.
Gruß Marboe

BilderMacher schrieb am 06.09.2019 um 09:01 Uhr

P.S.: @marboe: In der Beispieldatei sind noch die Login-Daten fürs Webhosting gespeichert.

Ja, das ist leider so. Es ist mir nicht gelungen dies dauerhaft aus der Datei zu entfernen.

@marboe,

entferne die beiden Häkchen und speichere die Projektdatei neu ab.

Dann sind alle FTP-Angaben nicht mehr vorhanden.

Zuletzt geändert von BilderMacher am 06.09.2019, 09:01, insgesamt 1-mal geändert.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

marboe schrieb am 06.09.2019 um 09:17 Uhr

Dann sind alle FTP-Angaben nicht mehr vorhanden

Nein, das klappt leider nicht.

Ich habe es sogar mit mehreren Versionen probiert. Aber ist nicht schlimm, kann nix dramatisches passieren. VG marboe

SteAl1988 schrieb am 06.09.2019 um 13:00 Uhr

Du beziehst dich auf das PDF-Tutorial welches oben verlinkt ist. Der Threadersteller wollte aber ein Hamburger Menü ohne PopUp-Navi, wenn ich das richtig sehe.
Somit antwortest du hier im ungeeigneten Thread. Deine Frage wäre unter dem Tutorial besser aufgehoben gewesen.

Sorry, hatte das nicht so als Möglichkeit für Rückfragen in Betracht gezogen, sondern eben mehr das Forum.

Dann hast du nicht sauber gearbeitet. Du kannst entweder selbst etwas kreieren oder das vorhandene aus der Vorlage ersetzen. Die Breiten von Objekten sollten natürlich gewahrt werden um genau das zu verhindern. Vielleicht hat dein Objekt einen Rand oder Transparenzen oder oder ...

S.o. hier scheint sich der gleiche Fehler fortzusetzen.
Beachte: es gibt in den Grundeinstellungen des WD die Möglichkeit, beim Duplizieren den Versetzungsgrad der neuen geklonten Objekte anzugeben. Vielleicht hast du hier nicht achtsam genug gearbeitet.
Der WD gibt dir beim Druntersetzen von Rechtecken ja einiges an optischer Hilfestellung in Form von farbigen Linien (natürlich hilft es auch, wenn man den Magnetismus einschaltet).

Ich hab es erst alleine probiert und dann die Dinge aus der Vorlage ersetzt. Im Web Designer sieht auch alles normal aus. Und im Browser am PC sind zumindest die Abstände zwischen dem ersten und letzten Menüpunkt weg. Dafür verdoppelt sich das Menü nach rechts, weil es ja gekachelt sein soll. Und die Menüpunkte lassen sich in der Ansicht auch nicht anklicken (Menü verschwindet dann). Auf dem Handy klappt es allerdings schon (mit besagten Schwierigkeiten).

Du kannst - und solltest - die URL hier im Forum veröffentlichen. Mehr Augen sehen auch mehr. Abgesehen davon, dass du ja eh eine Seite für das WWW erstellst. Was also in die Welt soll, darf auch hier ins Forum.

Ja ich dachte mir nur, dass Sie erst 100% fertig sein soll, bevor sie öffentlich wird. Aber hast ja Recht. Die URL ist neuewebsite.steffenalbus.de (lass dich nicht von den farbigen "Abstandshaltern" irritieren).

Wenn es hilft, die .web-Datei zu sehen, kann ich gerne sagen, wie du sie herunterladen kannst. Aber das dann wirklich nur per PN.

Auf jeden Fall schon mal vielen lieben Dank! 🙂

marboe schrieb am 06.09.2019 um 13:41 Uhr

Ich sehe deine Links als zB: http://neuewebsite.steffenalbus.de/#xl_Downloads

Das spricht für eine Seiteneffektwebsite. Dafür habe ich das nicht getestet; vielmehr habe ich das nur ausprobiert bei einer normalen Website.
 


Dein HamburgerMenü fängt mit der Bezeichnung auf Ebene 7 (javascript:xr_cpu(7) an. Da hast du also neben MouseOff und MouseOver noch drei andere Ebenen. Das könnte zu Fehlern führen.
Der WD zählt immer von unten nach oben. Die erste ist die Hintergrundebene, dann MouseOff, MouseOver und die Naviebene wäre dann die Nr.4.in der Basis (ohne die PopUpebenen die aufgrund der Navi entstehen).
Das widerspricht sich nicht grundlegend, muss dann aber detailliert getestet werden.

Da hast du wohl einiges anders gemacht. Mir erschließt sich überhaupt nicht genau, was. Denn du hast doch gar keine PopUpEbenen eingerichtet. Warum nimmst du denn überhaupt dann diese Anleitung? Kommt da noch was hinzu wie die Unternavigationspunkte?

Ich ergänze noch:
Zieht man das Browserfenster ein wenig breiter als für Smartphones üblich, sieht man das:

Was möchtest du denn mit so breiten Elementen?

Dafür verdoppelt sich das Menü nach rechts, weil es ja gekachelt sein soll.

Das ist in der PDFanleitung so nicht vorgesehen und macht auch wenig Sinn. Deine blauen Rechtecke sollten ganz normal gefärbt werden; einfach die Farbe im Editor aussuchen oder per Drag&Drop drauffallen lassen.

Und ich sehe Rechtecke, die mit Links belegt sind, aber nur 15px hoch.
Das scheint mir merkwürdig.

Vielleicht kannst du erst mal genau erklären, was du erreichen willst. Dann können wir dir sicher zielgerichtete Tipps geben. Gruß Marboe