Ein-Button-Menü-Lösung für Mobilseiten

marboe schrieb am 14.08.2014 um 10:34 Uhr

Liebe Community,
heute habe ich gar keine Frage, sondern einen Tipp für euch

Mir ist es gelungen eine Navigation zu bauen, die auf der Ein-Button-Lösung basiert und ohne schwierige Codeeingriffe machbar ist. Wem die vorgefertigten Navileisten nicht gefallen und lieber selbst designed, der könnte hier fündig werden.

Es soll von diesem einen Button einer Mobilseite

mit MouseOver-Effekt durch Klick oder durch Drüberfahren:

zu diesem Endergebnis gelangt werden:

Ausgangsbasis ist dieser Thread im Talkgraphics-Forum von Gary. (ladet euch die .web runter, sie enthält noch mehr Infos).
Realisieren kann man das wenn man weiß, dass es möglich ist, auch eine zweite und dritte usw. MouseOver-Ebene zu erstellen.
Gemäß dieser Anleitung habe ich
1. Über der allgemeinen MouseOff und MouseOver-Ebene eine neue Ebene erstellt; hier mit Namen !FixedTab2 - weil ich den Button fixiert haben wollte beim Scrollen. Anleitung per Tutorial von hier.
2. Hier meinen selbstdesignten Button erstellt, gruppiert
3. Eine neue Ebene angelegt mit Namen !FixedTab2MouseOver und den Button hier hineinkopiert per "an Position einfügen". Die Schrift geändert wie ich den MouseOver halt haben wollte. Gruppiert.
4. Diese beiden Buttons auf beiden neuen Ebenen nun markiert: weiche Gruppe bilden.

Das ist im Prinzip alles, was man mit allen Buttons machen muss.
Den Klick auf diesen erstellen Button habe ich linken lassen auf eine
5. neue Ebene - hier !FixedTab2Menue

Das sieht so aus:
   In der Gestaltung ist man hier absolut frei.  Das "Buttonbild" (dreiStrichRechteck + die gelbe Schrift "Menü' zB ist nur ein Bild,dass hier hineinkopiert und platziert wurde).
Möchte man, dass auf Klick auf zB "Home" etwas passiert, dann legt man
6. Hierüber eine MouseOver-Variante an. Im Beispiel heißt sie: MouseOver-2

....Voila, hat man das Endergebnis:

Wie die genaue Verlinkung auf die Ebenen funktioniert, kann man hervorragend in der .web-Datei von Gary nachvollziehen.
So sieht für mein Beispiel meine Ebenengalerie aus:

Dies ist ein Bild der Ebenengalerie über (!) der MouseOff und MouseOver-Ebene. In die genannten kommt für diese Umsetzung überhaupt nix und sie werden wie gehabt gestaltet.
Dann muss man diese neuen Ebenen nur noch auf alle Seiten übertragen. Fertig.


Wer das Ganze fixiert haben möchte, der sollte genau die Anordnung nachbauen und darauf achten, wie auch im Tutorial zur Fixed-Tab-Ebene beschrieben, dass der Platzhalter für diese fixierte Ebene die Seite ein klein wenig berühren muss. Liegt dieser Platzhalter neben der Seite, funktioniert es nicht.
So ist es richtig:

Wollte man das ganze nicht fixiert haben, dann ist die !FixedTab-Ebene einfach anders zu benennen und der Code wegzulassen.

Wichtig ist auch, sich klarzuwerden wo man einstellt, was bei MouseOver und bei Klick passieren soll.
Möchte man einen MouseOvereffekt haben, dann ist er hier einzustellen:

Möchte man, dass etwas "nur" bei Klick gezeigt wird, so wird dies hier eingestellt:
  (Eintrag in PopUp-Ebene)
Man kann auch beide Effekte kombinieren. Dies stellt dann die Mousebenutzer zufrieden, genauso wie auch die "Wischer".
Diese Anleitung wurde erstellt mit dem WebDesigner 10 premium mit dem neuesten Update 10.04.35041  64 b vom 31.7.14.
Viel Spaß beim Nachbau . Gruß Martina

Kommentare

marboe schrieb am 14.08.2014 um 11:00 Uhr

Sorry... ich kann den Link zum Tutorial "Fixierte Objekte" selbst nicht mehr öffnen.
Ich habe eine kleine Ergänzung geschrieben; vielleicht deshalb. Es kam der Hinweis, dass die Redaktion meine Änderung nun prüft.
Vielleicht ist es in einigen Tagen wieder möglich es zu sehen. Sorry.
Wenn ich das gewusst hätte, hätte ich nix dran geändert.

Mittlerweile ist das Tutorial wieder frei gegeben.

koppere schrieb am 16.08.2014 um 14:15 Uhr

Danke Martina für die Arbeit ds so rauszuarbeiten.

Hab jetzt auch gerade verstanden was der WD da macht mit Mobilseiten bzw. das die nicht automatisch erzeugt werden sondern das man die selber basteln muss und die Vorlagen mal grundsätzlich für alle enduser gedacht sind. Ich weiss im Moment nur nicht wie das am server dann aussieht ob man für die grosse und die kleine Variante dann einen Index hat bzw. wie die Browser das dann erkennen aber bekomm ich auch mal raus.

 

Jedenfalls glaube ich das die One Button Lösung da ziemlich optimal ist für Tabs aber ich mal schaun muss ob ich mich wirklich dazu aufraffen kann eine kleine Variante da auch zu bauen.Ist halt auch schwer zu entscheiden was man rausnimmt um die Übersichtlichkeit zu erhalten.

Thx anyway

Mike.P.E. schrieb am 09.03.2015 um 22:09 Uhr

Hallo und Danke für die ausführliche Anleitung.

In Bezug auf: http://www.magix.info/de/objekte-fixieren-webdesigner-9-premium.online-training.1014863.html bin ich über "Umwegen" in  diesem Beitrag fündig geworden zum Thema MouseOver auf der Fixed-Ebene.

Bei mir will das mit WD10 Premium irgendwie nicht funktionieren oder ich übersehe etwas ganz Simples.

Meine Vorgehensweise bisher:

  1. Anlegen Ebene !FixedTab oberhalb der MouseOver-Ebene. Das Objekt (Rechteck) mit dem Platzhalter ganz unten in der Ebene.
  2. Anlegen Ebene !FixedTabMouseOver oberhalb der !FixedTab-Ebene
  3. Butten erstellt: Gelbe Grafik mit Textfeld in einer Gruppe in der !FixedTabMouseOver-Ebene
  4. Butten erstellt: Blaue Grafik mit Textfeld in einer Gruppe in der !FixedTab-Ebene
  5. Beide Gruppen in einer weichen Gruppe zusammengefasst
  6. Ebene !FixedTabMouseOver unsichtbar gemacht

Ergebniss: Gelber Button (obwohl er Blau sein müsste) und kein MouseOver-Effekt.

Wo liegt der Fehler?

Als Anmerkkung noch: ich habe für das Experiment, um das erstmal zum Laufen zu bekommen, ein leeres Projekt angefangen. In der MouseOff-Ebene befindet sich legendlich ein Textfeld und ein Rechteck, die dann beim Scrollen wandern, während der Button stehen bleiben soll (ist das Einzige, was funktionirt).