Navigationsleiste auf Smartphonebildschirmgröße anpassen

lukas22x schrieb am 27.12.2017 um 20:57 Uhr

Hallo zusammen,

ich nutze zur Zeit den Xara Designer Pro X11 Crossgrate (Version: Xara Designer Pro X 11.2.3.40790  CD x64 Sep  2 2015) zur Erstellung meiner Homepage.

Diese besteht aus einer Desktopversion und einer Version für mobile Endgeräte.

Bei der Smartphone-Version eröffnet sich nun folgendes Problem:

Meine Navigationsleiste ist zu groß und ragt über den Bildschirmrand hinaus. Der letzte Reiter Galerie ist gar nicht mehr anwählbar.

Ist es nicht möglich, die Navigationsleiste so zu gestalten, dass man sie nach oben bzw. unten scrollen kann, sodass alle Punkte anwählbar bleiben? etwa wie in diesem Beispiel der Seite eines Sportartikelhändlers?

Oder Untergliederungspunkte zu erstellen, die die uninteressanten Menüpunkte zurückklappen, sodass nur die Punkte des aktuellen Bereiches zu sehen sind. (hier ein Beispiel des selben Sportwarenhändlers)

Die Standardmöglichkeiten von Xara eine Navigationsleiste zu bearbeiten sind leider unzureichend. Jedenfalls konnte ich keine Option finden, die die eben genannten Vorhaben möglich machen.

 

Zu meiner Hardware: Ich nutze ein Acer Notebook mit 8GB DDR 3 Arbeitsspeicher und AMD Quad Core Prozessor. Betriebssystem Windows 7

Vielen Dank schonmal im Voraus für Tipps und Anregungen.

Viele Grüße

Lukas

Kommentare

BeRo schrieb am 27.12.2017 um 21:42 Uhr

[...] Ist es nicht möglich, [...] Untergliederungspunkte zu erstellen, [...]

Aber ja...
Wie das geht, das steht u. a. in der Hilfedatei unter dem Suchwort "Untermenue"... 😉

Im Editor kann das dann so aussehen:

Viel Erfolg

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

lukas22x schrieb am 21.01.2018 um 18:51 Uhr

Hallo Be Ro,

vielen Dank für die schnelle Antwort (und entschuldige bitte für meine späte - Homepagearbeit muss ich meist in irgendeiner freien Minute erledigen). Zu dem Thema hätte ich allerdings noch einige Fragen:

Vor allen Dingen: Ich würde dem Betrachter gerne die Möglichkeit einräumen, die Navileiste zu scrollen. Bisher sieht mein Ergebnis so aus wie der erste Screenshot links. Doch es wäre super, wenn man eine Scrollfunktion wie in Screenshot 2 (rechts) vom Beispiel des, schon erwähnten, Sportartikelhändlers hätte. Ich hatte gehofft, es gäbe irgendwo eine Funktion im Xara Designer, die heißt "Scrollfunktion aktivieren" oder soähnlich. Wäre das nicht möglich?

Und zweitens: Das Design der Navileiste, vor allem der Unterpunkte, wie soll ich sagen... beeindruckt nicht wirklich. Zumal die Hälfte des Wortes bereits im Bildschirmrand verschwindet:

Ist es nicht möglich ein interessanteres Design zu wählen (Stichwort Design Galerie - konnte allerdings nix finden)? Oder, was besser wäre, beim Antippen des, zu unterteilenden Überpunktes, wie hier z.B. "Produktbeschreibung >", die anderen Kapitel einzuklappen mit dem blasseren Verweis "zurück" oder "Hauptmenu", sodass aktiv nur noch die Unterpunkte des geöffneten Kapitels zu sehen sind (z.B. "Produkte, > Produkt 1, > Produkt 2...") ? So wie in diesem Beispiel:

Ich hoffe diese Frage ist nicht zu speziell, aber eine schlechte Navigationsleiste fällt dem Seitenbesucher leider sehr schnell auf.

Danke schonmal für Tipps...

marboe schrieb am 25.01.2018 um 13:20 Uhr

Hallo Lukas,

das kann man realisieren - allerdings dann nicht mehr sinnvoll mit den Navigationsleisten des WD, sondern per Hand erstellt mit PopUpEbenen.

Ich hatte vor längerem mal ein Muster erstellt. Ich stelle es hier für einige Zeit mal zum Download zur Verfügung.
Hier findest du es in Aktion und kannst es auch gleich runterladen. Erstellt wurde es mit dem WebDesigner 12 premium.

Wenn du dir die interne Verlinkung ansiehst, wirst du es sicher ausbauen können. Es ist selbsterklärend. Wichtig ist allerdings, dass es zu jeder Ebene einen Link von MouseOff aus geben muss. Sonst findet der WD die Ebenen nicht.

Gruß Marboe

 

Ergänzung:

Die dadurch erzeugten Navi-Ebenen müssen per Hand auf alle Seiten übertragen werden. Ich habe die besten Erfahrungen damit gemacht, dies weitgehend händisch nach folgendem Schema zu machen (auch wenn die Magixprodukte hier einen einfachereren Weg möglich machen)

  • Über MouseOff und MouseOver per Hand "neue Ebene erstellen" und entsprechend benennen
  • Vorgang wiederholen, bis alle gewünschten Ebenen auf allen Seiten vorhanden sind
  • von der Musterseite aus die Textlinks auf alle MouseOff - Ebenen aus "auf allen Seiten wiederholen". Danach die Wiederholung "Auf allen Kopien" wieder entfernen. s.u.*
  • Inhalt einer Ebene von der Musterseite/-Ebene aus kopieren mit STRG+'C
  • Entsprechende Ebene auf den anderen Seiten anklicken und damit aktivieren und per STRG+Shift+V Inhalte einfügen. Genauer: "An Position einfügen" Somit ist sichergestellt, dass nachher nix springt, wenn man sich innerhalb der Navi bewegt.
  • Hast du vorher peinlichst darauf geachtet, dass alle Links schon drin und auch richtig sind, funktioniert deine PopUpEbenen-Navigation nun sofort auf allen Seiten richtig.
  • Diejenigen Buttons, die die letzte Öffnungsebene repräsentieren und eben nicht auf eine Navi-Ebene zeigen, sondern spezielle Seiten aufrufen, dürfen natürlich dann unterschiedlich bestückt werden mit den richtigen Linkzielen.

* Dies ist nötig, weil die Textzeile, welche auf die Ebenen verweist jede für sich pro Seite eigenständig sein sollten. Dies gilt ganz besonders, wenn du ein größeres Projekt hast!!
Hast du zB auf der 5. Seite deiner Projektdatei schon von Hause aus zB zwei zusätzliche Ebenen erstellt, weil der Inhalt es eben so erfordert, schaffst du mit den Navigationsebenen die 3. oder 4. usw Ebene. Auf einer anderen Seite allerdings ist die einzufügende Navi-ebene vielleicht die 2. oder 3. Ebene. Auch sind ja grundlegend Unterschiede zwischen einer Mobilen Variante und der Standard Variante möglich.

Da sich wiederholende Objekte ja auf allen Seiten gleichzeitig ändern würden, ist es hier besser die Wiederholung wieder raus zu nehmen. Es geht nur darum, dass man die Textzeilen mit Link eben nicht händisch kopieren muss, sondern dies einmal automatisch tun kann - dann allerdings die Vernetzung wieder entfernen.

Ich hoffe, das war einigermaßen nachvollziehbar erklärt 😁

marboe schrieb am 27.01.2018 um 12:27 Uhr

Mittlerweile habe ich das Tutorial dazu veröffentlich.

https://www.magix.info/de/tutorials/

Gruß Marboe

lukas22x schrieb am 28.01.2018 um 21:37 Uhr

Hallo Marboe,

vielen Dank für das Tutorium. Genau das was ich gesucht habe.

Ich bin gerade dabei es auszuprobieren und kam zu folgendem Problem: (- ich hoffe, ich schreibe jetzt nicht wegen irgendeiner Lapalie, die ich hier übersehen habe):

Beim Anklicken verschwindet mein Menue einfach, anstatt, dass sich die Unterpunkte ausklappen bzw. die Ebene e1_x erscheint. Das sieht dann etwa so aus:

Zuerst- und beim Anklicken des obersten Bottons dann .

Eigentlich sollte man das sehen (Ansicht nun im Xara designer) : . Die Ebenen habe ich wie im Tutorium erstellt:

.

Was die Verweise angeht, habe ich mittlerweile alles für den Botton probiert. 1.Webeigenschaften - Popup Ebene = e1X anzeigen oder 2. Webanimation - Popup Ebene anzeigen oder 3. Mouseover Effekt - Popup Ebene e1_x einblenden. Brachte alles nichts.

Wo könnte mein Fehler liegen? Evtl. in den Ebenen?

marboe schrieb am 29.01.2018 um 06:29 Uhr

Wo könnte mein Fehler liegen? Evtl. in den Ebenen?

Das ist so nicht zu beantworten. Leider.
Hast du dir die .web mal runter geladen? Dann kannst du durch Vergleiche vielleicht den Fehler finden.

Ich vermute, du hast übersehen, dass die Links auf die Ebenen versehen sind mit der Öffnungseigenschaft "parent" im Webeigenschaftsdialog. Kontrolliere das doch bitte mal.

Gruß Marboe