Schau Dir mal die Demo, die ich gerade online gestellt habe, auf einem schmalen Bildschirm an...

Wenn es das ist, was Du gesucht hast, dann kannst Du das relativ schnell realisieren, wenn Du die Infos, die Du schon hast, in einen Topf wirfst und ein bisschen rührst...

Gerne morgen mehr.

CU

Hallo BeRo, aber ja. Da ist alles dabei was ich wollte. Es lädt mit meinem Android ein wenig seltsam, aber wenn es geladen ist, ist alles wunderbar. Da ich eigentlich eine gute Köchin und Bäckerin bin, harre ich der fehlenden Zutat in meinem Rezept ;-) HG Martina

[...] harre ich der fehlenden Zutat in meinem Rezept [...]

Kein Problem. Ich melde mich heute Nachmittag wieder.

In der Zwischenzeit kannst Du Dir gerne hier die Projektdatei zu der Demo herunterladen. Vielleicht findest Du darin schon die noch fehlenden Details zu Deinem Rezept ...

...nur kein Stress :-) Muss ja auch ab und zu mal arbeiten. Vor Donnerstag komme ich eh nicht dazu das umzusetzen was du mir kochst bzw gekocht hast. HG Martina

Bei so vielen Einzelfragen zum Thema ist es wohl besser, ich fange ganz von vorne-, bei den Zutaten an.

Vermutlich ist nicht jedem WD10 Nutzer klar, wie einfach aus einer "normalen", multiplen Navigationsleiste, eine 1-Button Lösung werden kann...

Aktuell soll diese 1-Button NavBar nur im Layout für Smartphone & Co erscheinen. Der Button soll außerdem eine fix-/float Position oben links erhalten.

• Als Vorbereitung legst Du dazu eine neue, absolut leere Seite an, die für unser Beispiel den Namen "navbar" bekommt.
• Dann kopierst Du eine NavBar von einer beliebigen Seite und fügst sie in die neue, leere Seite ein.
• Von allen anderen Smartphone/Tablet Seiten muss die NavBar jetzt gelöscht werden.
• Die übrig gebliebene NavBar öffnest Du mit einem Doppelklick zur Bearbeitung und änderst den Link des ersten Buttons auf "Nichts tun"
  
  
  
   
• Jetzt müssen alle anderen Menüeinträge gelöscht werden. Nur der erste Eintrag bleibt stehen.
• Dann entfernst Du den Haken aus der Checkbox "Site-Navigationsleiste (linkt automatisch auf...) und setzt ihn gleich darauf wieder ein.
• Das Resultat ist eine 1-Button NavBar mit einem kompletten Untermenü in dem alle anderen Seiten enthalten sind.
  Die ebenfalls enthaltene Seite "Navbar" musst Du natürlich aus der Liste entfernen, denn die soll ja nicht geöffnet werden können

• Den Links muss unbedingt noch die Eigenschaft "_parent" zugewiesen werden, damit sich die über die Linkfunktion aufgerufenen Seiten im "Elternfenster" öffnen und nicht in dem kleinen Fenster der eingebundenen NavBar!
  
  
  
   
• Die jetzt funktionsfähige 1-Button NavBar verschiebst Du in die obere, linke Ecke der leeren Seite und verkleinerst dann die Seitengröße auf die Größe des Buttons, z. B. 80 x 40px.
• Wenn es nötig sein sollte, kannst Du hinter die NavBar noch ein passendes Rechteck legen, das eine Kontrastfarbe zu der/den Seite(n) hat, auf der/denen sie später zu sehen sein wird.
• Die Seite "navbar" wird über einen iframe Code im Platzhalter auf den einzelnen Seiten eingebunden. Damit der im iframe Code definierte Bereich nicht weiß erscheint, muss im HTML Body der "navbar" Seite noch folgende CSS Anweisung abgelegt werden:
  --------------------------------
  <style type="text/css">
  html,body { background-color: transparent; }
  </style>
  --------------------------------
  
  
   
• Die 1-Button NavBar ist damit fertig

Was noch fehlt, ist das "Zusammenrühren" mit den einzelnen Seiten...

• Dazu legst Du auf einer "Smartphone/Tablet" Seite einen Platzhalter an (Position- und Größe ist egal) und fügst den u. a. Code in den HTML Body ein:
  --------------------------------
  <style type="text/css">
  #navbar {position: fixed; left: 0px; top: 100px;}
  </style>
  
  <div id="navbar">
  <iframe width= "120px" height="400px" allowtransparency="true" scrolling="no" frameborder="0" src="navbar.htm" style="display: block;" align="left"></iframe>
  </div>
  --------------------------------
  Die gelb markierten Werte legen die Größe- und die Position des Bereichs für die 1-Button NavBar fest. Der Wert für "height=" entspricht der Länge der aufgeklappten NavBar.
  Die o. a. Werte sind für die Demo passend. Für Deine Site musst Du sie ggf. noch korrigieren.
• Abschließend benutzt Du für den Platzhalter die Funktion "auf allen Seiten wiederholen'", damit er auf allen "Smartphone/Tablet" Seiten erscheint.
• Das war's, jetzt kann "gegessen" werden

Guten Appetit

Hallo Bero,

na, da sag ich mal: herzlichen Dank.

Ich hab es ausprobiert - funktioniert alles wunderbar!!

Leider ist es noch nicht das, was ich wollte. Ich möchte aber den Thread hier nicht kaputt machen und deinen super Beitrag nach unten rutschen lassen. Am besten mache ich einen neuen auf oder schreib dir so. Was meinst du?
Dankbare Grüße Martina

[...] Leider ist es noch nicht das, was ich wollte. [...]

Schade, aber noch ist nichts verloren.

Beschreibe mal Dein Vorhaben genauer.

[...] Ich möchte aber den Thread hier nicht kaputt machen [...]

Das sollte kein Problem sein. Wer ernsthaft sucht, der wird die für ihn wesentlichen Infos trotzdem finden können. Andere User stellen Ihre Frage dann (wie so oft) einfach zum x-ten Mal neu...

Andere User stellen Ihre Frage dann (wie so oft) einfach zum x-ten Mal neu... :-D

Ja, da hast du wohl recht.

Dann mach wenigstens ein Tutorial draus. Die Anleitung ist super.
Was mich nicht zum Ziel führt ist einerseits, dass ich wohl nicht genau genug erklärt habe, was ich realisieren möchte und das Mißverständnis, dass deine "Vorschau" eigentlich alles hat was ich wollte - dann aber doch nicht. Ich versuche es besser zu erklären:

Jeder kennt doch diese EinMenüButtons mit drei Strichen in einem Viereck. Sehr oft auf Mobilseiten zu finden; auch zu diversen Einstellungsmenüs führt dieses "Symbol"; zum Beispiel im Firefox.
Mir würden auch drei simple Querbalken reichen, evtl sogar nur als Bild, von dem aus es dann nach Klick weitergeht.
Zum Beispiel aber auch so, wie von mir gezeigt:

Ich hab nebendran noch Menü geschrieben und daraus ein Bild gemacht (Gruppe), dann eine Navigation, fixiert.

Nach Klick darauf wollte ich eine Naviöffnung nach unten. Mein Wunsch wäre (unverschämterweise), dass sich die Schrift ändert per MouseOver in gelb und dann eine selbstdesignte Navi nach unten öffnet.
Würde in Aktion so aussehen:

  Am Hintergrund-Rechteck kann man noch feilen.

Wenn ich dein Tutorial umsetze, erhalte ich dies:

Das sieht nicht so prickelnd aus. Finde ich jedenfalls

Ich habe nun verschiedene Lösungen angedacht:
1. von der erster Navbar aus die zweite aufrufen  (Vorteil: Das Wort Menü wäre dann nach Klick  in gelb). Deswegen hatte ich mit zwei Navigationen gearbeitet, aber das hat ja nicht geklappt.

2. Da ich sehr sehr gerne mein eigenes Design der aufklappenden Untermenüs nutzen möchte, wäre vielleicht sowas möglich nur mit Bildern?  Man kann ja jedem Bild einen Link mitgeben. Geht das mit z-index? Vielleicht mit display: block oder inline?

Wenn ich es auf dein Beispiel der Wolfsseite übertrage:
Der Menübutton müsste separat laufen können.
Eine Navi (mit nur einer Zeile) ruft die nächste Navi auf).

Geht evtl: ein Bild ruft eine Navi auf?  (alles eingebettet in "Fixiert" wie gehabt)
Oder: Ein Bild ruft ganz viele Bilder auf, die untereinander angeordnet und irgendwie fixiert sind.....

Grundsätzlich denke ich, dass diesen DreiStrich-Button ganz viele gerne auf einer Mobilen Seite umgesetzt sehen würden. Nur wie?  Ich habe kein vorgefertigtes Design gefunden, bei dem der erste Button überhaupt anders gestaltet gewesen wäre als die Untermenübuttons.
Aber vielleicht ist das mit dem WD auch wirklich nicht machbar. Ich weiß es leider nicht. Deswegen bin ich auch gedanklich in die Richtung mit Ebenen und Bildern gegangen. Aber auch hier leider nicht zu einem sinnvollen Ergebnis gekommen.

Ich hoffe, das es jetzt klarer geworden ist. Vielleicht hast du ja noch einen Tipp, wie ich es angehen kann. Natürlich kann man an einigen Stellen noch Abstriche machen. Aber das wäre mein Idealwunsch .

Herzliche Grüße Martina

[...] Mein Wunsch wäre (unverschämterweise), dass sich die Schrift ändert per MouseOver in gelb und dann eine selbstdesignte Navi nach unten öffnet. [...]

Wenn Du nicht die komplette NavBar neu designen willst, geht das, wenn Du eine zusätzliche Grafik über den 1-Button NavBar legst und zusätzlich ein paar Änderungen am JavaScript Code der Seite "navbar.htm" vornimmst.

Das Ergebnis kann dann (im "Ruhezustand") so aussehen:

Nach einem MouseOver ändert sich die Farbe der Grafik und auch die Farbe des Menüeintrags, der gerade "überfahren" wird.

Die online Demo habe ich entsprechend angepasst. Auch die Projektdatei ist aktualisiert. Schau's Dir nochmal an und wenn es passt, folgen die Details... 

Hallo BeRo,

jaaaaaa

Das Rezept schmeckt sehr lecker.
Ich sehe auf meinem Smartphone ein DreiStrichButton, der die Farbe wechselt wenn man klickt oder auf dem Desktop drüber fährt.
Es klappt etwas nach unten auf, die Einzelbuttons wechseln auch die Farbe im Desktop beim Drüberfahren. Auf dem Smartphone natürlich erst bei Klick.
Was ich nicht geschafft habe: das aufgerufenen Menü wieder wegzuklicken ohne etwas auszuwählen. Aber das fällt bestimmt unter die Rubrik "Abstriche müssen sein". Ist jetzt auch nicht so mega wichtig.
In die Rubrik gehört sicher auch der Floateffekt von links nach rechts. Da gilt gleiches. Man kann nicht alles haben.

Also alles bestens, alles super: bitte um die Zutaten

Wenn Du nicht die komplette NavBar neu designen willst,

Mhmm. Da hätte ich jetzt auch kein großes Problem mit. Wenn es das einfacher macht, kein Problem.

Herzliche Grüße Martina

Nehmen wir das Ende vornweg. 

Die komplette NavBar neu zu designen würde die Arbeit vereinfachen, weil Du dann den "3-Strich Button" direkt als NavBar Button anlegen könntest. Die Grafik würde zwar zunächst auf allen Buttons erscheinen, nach dem Schrumpfen auf die 1-Button Variante hättest Du dann aber gleich den richtigen Button zur Verfügung, inkl. der MouseOver Variante.

Die Texte für die Untermenü Buttons lassen sich auf die Art allerdings nicht erstellen, die nimmt der WD10 immer automatisch aus den Namen der Unterseiten. Sie müssen also in jedem Fall manuell bearbeitet werden.

Unter dem Strich wird die komplett manuelle Lösung wahrscheinlich die schnellere- und flexiblere sein...

Du benötigst also zunächst 2 kleine Grafiken (3-Strich) für den Button der 1-Button NavBar.
1x die MouseOff Variante und 1x die MouseOver Variante.

Für die Demo habe ich die Grafiken so benannt: "menuicon grau.jpg" für die MouseOff Variante und "menuicon ocker.jpg" für die MouseOver Version.

So werden die Grafiken in die Seite "navbar" eingebunden:

Die MouseOff Variante muss direkt, an oberster Position, in die Navigationsleisten Gruppe eingebaut werden (s. Screenshot), sonst geht die Link Funktion verloren.

Die MouseOver Variante kann oberhalb der Navigationsleisten Gruppe abgelegt werden.

Alle weiteren Änderungen werden direkt im Code der Seite "navbar.htm" gemacht. Das Projekt muss also jetzt exportiert werden.

Öffne die Seite mit einem geeigneten Texteditor (z. B. Notepad++) und ändere/ergänze ab der Zeile 45* den Inhalt wie im Screenshot gezeigt:
*(Die Zeilennummern beziehen sich auf eine Version der Demo. Sie können in Deinem Projekt abweichen. Du kannst Dich aber immer an den JS Funktionsaufrufen- mit den zugehörigen Parametern orientieren. z. B. "xr_d.write(".xr_links_menu1...", hier in Zeile 45)

Der oben rot eingerahmte Hintergrund-Farbwert aus dem MouseOff Zustand, muss in den MouseOver Zustand übertragen werden (grün markiert).

Der in der Zeile 46 blau hinterlegte Farbwert, betrifft die Textfarbe im MouseOver Zustand (hier ist das ein Gelb Wert).

Die orange markierten Werte stehen für die Abstände zum oberen/unteren Rand des Textfeldes in den Menüzeilen. Für die Demo habe ich die Werte alle auf 6px geändert.

Die gelb markierten Einträge habe ich zusätzlich eingefügt. Sie sorgen dafür, dass:
1.) der Zeilenabstand auf 10px begrenzt wird. Damit rücken die Zeilen näher zusammen.
2.) der Menütext fett dargestellt wird (funktioniert leider nicht bei einigen Smartphone Browsern)

Ab Zeile 50 (xr_startSubmenu) werden die Menüeinträge definiert. Da kannst Du auch die punktierte Linie unterbringen, die die einzelnen Einträge voneinander abgrenzt.

Der blau markierte Wert (Zeile 51) definiert die Breite des Hintergrunds der Untermenüeinträge.

Grün markiert sind die Bezeichnungen der Unterseiten, so, wie sie im aufgeklappten Menü erscheinen.

Gelb markiert sind die Einträge für die gestrichelte Trennlinie. Das führende Break ("<br />") sorgt dafür, dass die Linie unter die jeweilige Seitenbezeichnung gesetzt wird.

Rot unterstrichen ist die Anweisung "_parent", die dafür sorgt, dass die aufgerufene Seite im "Elternfenster" geöffnet wird und nicht im aktuellen Fenster der 1-Button NavBar,
Die Einstellung kannst Du allerdings schon im WD Editor vornehmen. Sie muss nicht manuell erfolgen.

Bei der Anleitung, die ich weiter unten gepostet habe, hatte ich das nicht erwähnt (zwischenzeitlich korrigiert)

Es gibt zwar noch eine Reihe von "Stellschrauben", die das Erscheinungsbild beeinflussen, die Möglichkeiten sind aber so vielschichtig und miteinander verwoben, dass wir das vorerst "vergessen".

[...] In die Rubrik gehört sicher auch der Floateffekt von links nach rechts.[...]

Wenn Du damit meinst, dass die 1-Button NavBar horizontal mit der dargestellten Seite "wandern" soll, dann ist das mit einer kleinen Änderung des Codes im Platzhalter zu machen, der auf den einzelnen Seiten abgelegt wurde.

Der CSS Code sah bisher so aus:

--------------------------
<style type="text/css">
#navbar {position: fixed; left:0px; top: 100px;}
</style>
------------------------

Damit wird die NavBar immer links im Browserfenster positioniert, egal wie groß das Fenster ist.

Wenn Du den oben gelb markierten Eintrag so änderst: "margin-left:-20px;", wird die NavBar immer links im Seitenfenster stehen, hier 20px vom Seitenrand entfernt (In der Demo habe ich das gerade entsprechend angepasst...)

Wenn es bei der aufgeklappten Darstellung der NavBar Größenprobleme geben sollte, kannst Du im WD den iframe Code der Platzhalter verändern:

Die gelb markierten Einträge zeigen die Werte für die Höhe und Breite des für das aufgeklappte Menü zur Verfügung gestellten Bereichs. Wenn Änderungen nötig sind, kannst Du sie da vornehmen.

Fertig. Damit ist die 1-Button NavBar auf Deine individuellen Anforderungen abgestimmt.

Damit die ganze Arbeit beim nächsten Vorschau Start des WD nicht verloren geht, unbedingt vorher die Datei "navbar.htm" separat speichern.
Die geänderte Datei muss nach dem Upload des Projekts manuell auf den Webserver geschoben werden. Aber das kennst Du ja...

Also dann, viel Spaß beim "Tüfteln"

Hallo BeRo,

erst mal vielen vielen Dank.
Ich habe eine Verständnisfrage:

Die komplette NavBar neu zu designen [...]  wahrscheinlich die schnellere- und flexiblere sein...[...]

Das hab ich ja schon gemacht; bei mir hieß sie "test".

Welche Navi hast du genommen bei ?

Welche Navi war markiert bei diesem Arbeitsschritt?
Ich verstehe deine Ausführungen so, dass die ganzen Untermenüs mit Eintrag "parent" (das hat ich eh schon gemacht) alle per Hand in die exportierte navbar.htm eingefügt werden müssen.
Kannst du mir einfach ein paar Stichworte rüberwerfen damit ich die Codeänderungen ausprobieren kann?
Nehm ich bei der Drei-Strich-Navi nur die zwei Bilder zum Weiterarbeiten und ignoriere sie ansonsten?

Gruß Martina

[...] Welche Navi hast du genommen [...]

Die originale, aus der Vorlage "Wolf"

[...] Welche Navi war markiert bei diesem Arbeitsschritt? [...]

Das war die (fast) fertige 1-Button NavBar, die ich (nach Rezept ) aus dem o. a. Original erstellt habe.

[...] Ich verstehe deine Ausführungen so, dass die ganzen Untermenüs mit Eintrag "parent" [...] alle per Hand in die exportierte navbar.htm eingefügt werden müssen. [...]

Nicht ganz.

Der Eintrag "_parent" kann schon mit dem WD vorgenommen werden, wie im Screenshot gezeigt.
Auch die Namen in den Menüeinträgen können im selben Arbeitsschritt schon im WD eingegeben werden.
In meiner Anleitung war ich (noch) davon ausgegangen, dass der WD grundsätzlich die realen Namen der Seiten einfügt. Das trifft aber nicht zu. Die Namen können also schon im WD Editor von Dir vorgegeben werden.
Natürlich darfst Du sie auch manuell in der Datei "navbar.htm" ändern

[...] Kannst du mir einfach ein paar Stichworte rüberwerfen [...]

Gerne geschehen, aber wie ließ doch Herr Gothe schon so treffend sagen:

Der Worte sind genug gewechselt,
lasst mich auch endlich Taten sehen!
[...]

Aber Einen hab' ich noch.

Du sagtest hier:

[...] Was ich nicht geschafft habe: das aufgerufenen Menü wieder wegzuklicken ohne etwas auszuwählen [...]

Mit ein bisschen Fingerspitzengefühl geht auch das.

Im u. a. Screenshot siehst Du den Bereich, in dem Du (auf einem Smartphone oder Tablet) klicken kannst, um das geöffnete Menü wieder zu schließen.

Die Bereich wird im iframe Code des Platzhalters für die NavBar festgelegt.

Der Bereich muss mindestens so groß sein, dass er die aufgeklappte NavBar- inkl. Button umschließt. Ein zusätzlicher Randbereich kann zum Klicken benutzt werden.
Dieser Klickbereich darf aber nicht zu großzügig ausfallen, denn er "versteckt" alle darunter liegenden Objekte, die dann nicht mehr ausgewählt werden können (z. B. Links oder popup Bilder etc.).

Aktuell ist der Bereich 140 x 350px groß.

So, nun bist Du dran

Gerne viel Erfolg

[...] Nehm ich bei der Drei-Strich-Navi nur die zwei Bilder zum Weiterarbeiten und ignoriere sie ansonsten? [...]

Ja. Aber Du musst ansonsten nichts ignorieren, weil Du die Grafiken ja erst einbaust, wenn der Rest der NavBar schon gelöscht wurde.

Zu dem Zeitpunkt hast Du ja nur noch den 1 Button zur Bearbeitung "auf dem Tisch"

Hallo BeRo,

So, nun bist Du dran

Was soll ich sagen?   Klappt nach dieser tollen Anleitung wunderbar. Vielen Dank!

Hier mal ein Foto vom Zwischenstand; den Feinschliff mach ich heute nicht mehr.
  Da muss noch mehr Kontrast rein, keine Frage.

Da hatte ich ja nochmal Glück dass dein Zitat nicht in rot geschrieben war.
Das mit dem Klickrahmen ist sehr toll. Hat auf deiner Seite auch hervorragend geklappt. Da meine Seite noch nicht online ist, kann ich es mit dem Smartphone zumindest noch nicht testen. Auf dem Desktop klappte es.

Mit dem Floateffekt habe ich genau das gemeint.
Herzlichen Dank für all die Zutaten zu einem wunderbaren Rezept. Ich bin mir sicher, diese Anleitung darfst du noch oft weitergeben.
Dankbare Grüße Martina

[...] Hier mal ein Foto vom Zwischenstand; [...]

Gratuliere! Das sieht doch schon nahezu professionell aus.

[...] Da muss noch mehr Kontrast rein [...]

Klar, aber das sind ja wirklich nur noch ein paar Mausklicks, im Code der Datei "navbar.htm"...

Die beiden grün markierten Werte sollten identisch geändert werden, damit sich nicht bei einem MouseOver die Hintergrundfarbe ändert.

die gelb markierte Einstellung beeinflusst die Transparenz zum Seitenhintergrund. Da können Werte zwischen 0,0 und 1 stehen. 0,0 steht für volle Transparenz.

Das Ergebnis mit den oben gezeigten Werten sieht so aus:

Aber da sind Deiner Kreativität natürlich keine Grenzen gesetzt.

Viel Spaß noch damit und ein schönes WE

Hallo liebe Runde,

ich bin meist ein fleißiger Forumsleser, der, auf der Suche nach Antworten oder Inspiration sehr oft "nur" die Ausgangsfrage liest und dann (*schäm*) die letzte und vielleicht noch vorletzte Antwort liest.

Wer das auch macht, dem sei gesagt
ausgehend von meiner Ausgangsfrage - das geht alles.
Im wesentlichen hat mir die Info gefehlt, dass man ein größeres Iframe in einem kleineren "aufpoppen" lassen kann durch die Linköffnungseigenschaft "parent".
Und neu für mich war auch, dass man in eine fertige Navigationsleiste zusätzlich Bilder einbringen kann.

Natürlich gab es rechts und links dieses mittlerweile langen Weges zum Ziel noch jede Menge Zusatzinfos und Tricks. Lesen lohnt also .

Und nicht irritieren lassen: was bei BeRo zB ungefähr Zeile 46 im Code war, ist bei mir in 88. Was bei ihm ca. Zeile 50 ist, war bei mir ab 169 ff.

@BeRo
Ischhabegarkein Eintrag opacity und sogar der ganze Eintrag "(filter: progid...)" fehlt bei mir.
Ich vermute, das liegt an meiner selbstdesignten Navbar, die im jetzigen Zustand noch gar kein transparentes Hintergrundfeld hat. Wenn ich das im WD bearbeite und neu exportiere, wird es auch im Code sichtbar sein. Denke ich so.

Natürlich muss ich alle Codeänderungen dann nochmal machen. Aber das ist schnell gemacht.
Verwundert bin ich über deinen Hinweis zum Hintergrund. Weil der ist so wie von dir empfohlen.

Ich sehe in der Vorschau den Hintergrund auch überall gleich. Vielleicht nur eine optische Täuschung beim geposteten Bild.
Wie auch immer... jetzt kommt der Feinschliff. Wie es funktioniert, weiß ich ja jetzt.
Vielen Dank!!!

Herzlichen Gruß Martina

bei mir funktioniert es nicht! die Seite mit der Navigation, wird nicht angezeigt auf der Homepage, smartphone version. Ich möchte mein menü immer oben rechts haben.

@DavidE90

Du hast Dein Problem richtigerweise hier, in einem eigenen, neuen Thread gepostet.
Das zusätzliche Posting in dem uralt Thread ist überflüssig; es stiftet nur Verwirrung... 😣