Ich habe versucht (2 Std. lang) das Menü nach deiner Anleitung nachzubauen...bin leider gescheitert:-(

Das Problem ist eigentlich viel komplexer als ich dachte.

Meine Vorgehensweise:

1. leere Seite erstellt und die gesamte Navbar mit Garfik etc.. dort hin kopiert
2. die leere Seite auf die Grösse der Navbar verkleinert. Die Navbar mit dem Balken hat eine Größe von 3000x63px..die leere Seite wo sich die Navbar befindet ebenso.
3. auf der Startseite die Navbar und den Twek enfernt und per Platzhalter den angepassten CSS und iFrame der leeren Seite eingefügt

So weit alles ok und es sieht. sogar gut aus, auch die Tablet und Smartphone Version zeigt nicht mehr die PC Variante der Navbar...bis auf die Tatsache, dass man mit dem Menü nichts ansteuern kan. Es ist ein Anker Menü und wenn ich ein Link anklicke dann gehen irgendwelche iFrame Fenster auf und die gesamte Navbar verschiebt sich mit jedem Klick immer weiter nach Links...sieht echt witzig aus aber unbrauchbar.

Zu sehen und testen hier: http://abireisen.magix.net/test/

Nach dem ich mit meiner Geduld am Ende war, habe ich mich entschieden die mobilen Seiten nicht mehr zu gestalten. Habe sie aus dem Projekt gelöscht und dachte, egal dann eben ohne diese Varianten. Und jetzt kommt es! Wenn ich die Tablet und Smarphone Version entferne dann springt das gesamte Menü um ca. 35%-40% nach links. Das Problem habe ich schon mal hier im Forum angesprochen, leider hatte niemand eine Lösung dazu gefunden. Ich dachte evnetuell ist etwas nicht ok mit meiner Twek Navbar und habe sie in einem neuem, blankem Projekt schnell nachgebaut um zu schauen, ob das Problem weiter besteht....tja genau das selbe!

Also fassen wir doch diese paradoxe Situation zusammen:

Wenn ich mich entscheide für die Tablet und Smarphone Variante. Habe ich das Problem mit dem Twek Code der fixierten Navbar. Es funkt. einfach nicht bzw. kann nicht in diese Varianten konvertiert werden!

Wenn ich der CSS und iFrame  Anleitung von BeRo folge um eben die mobilen Varianten doch zu gestalten, habe ich das Problem, dass die Links als iFrame nicht funkt. Zu sehen hier: http://abireisen.magix.net/test/

Wenn ich mich entscheide die Seite ohne Tablet und Smarphone Variante zu gestalten, habe ich das Problem, das die Twek Navbar eingensinnig nach Links springt. Die Links sollten rechtsbündig stehen und wenn ich die Seite hochlade sind sie nach links versetzt. Um es besser zu verstehen kann man vielleicht schnell auf einer blanken Seite 2 Links und einen Balken mit dem Twek Code fixedtab anachbauen. Zu sehen hier: http://abireisen.magix.net/

Ich weiss jetzt nicht mehr weiter und dazu muss ich sagen, ich stehe unter enormen Zeitdruck denn die Seite sollte vor einer Woche Online sein.
Und egal wie ich jetzt mich entscheide in allen 3 Fällen kann die Seite so nicht Online gehen.
Bin für jede Hilfe und jeden Tipp sehr dankbar.

Gruß
Vik

[...] So weit alles ok [...] bis auf die Tatsache, dass man mit dem Menü nichts ansteuern kan. [...]

Das liegt vermutlich daran, dass die verlinkte Seite nicht im Elternfenster (target="_parent") geöffnet wird sondern im aktuellen Frame.

[...] wenn ich ein Link anklicke dann gehen irgendwelche iFrame Fenster auf und die gesamte Navbar verschiebt sich mit jedem Klick [...]

Die Ursache könnte dieselbe sein wie oben gesagt...

Hier, in einem der Postings, die ich zu dem Thema verfasst habe, ist die Vorgehensweise dazu genau beschrieben.

Deine Beispielseite scheint außerdem noch Reste des !FixedTab Tweaks zu haben. Wenn das zutrifft, sind Probleme bei der Ausführung des von mir empfohlenen CSS/JS Codes vorprogrammiert.

Was mir noch auffällt, ist der 3.000px breite Balken hinter der NavBar. Der ist nicht nötig, wenn du stattdessen eine Hintergrund Kopfleiste verwendest, wie hier beschrieben. Weitere Infos zum Einbau findest Du in den anderen Kommentaren des Threads (2 Seiten)

Probier's nochmal.

Viel Erfolg

wie ein braver Scout bin ich deinen Hinweisen gefolgt und der Tipp mit der parent Option war goldrichtig!

Das einzigste was ich noch nicht gelöst habe ist der horizontale Scrollbalken am Fuss http://abireisen.magix.net/test/  des Explorers (ist vermutlich durch den Platzhalter entstanden).

Man kann  jetzt nach rechts scrollen und quasi in der "Singularität" des Hintergrunds landen. Es hat jetzt zwar keine Auswirkung auf die Funktionen aber als resp. Design sollte er dort nicht  erscheinen.

Der schwarze Hintergrund ist leider bei der Navbar gewünscht und ich vermute weil er  über ein iFrame angezeigt wird erscheint deswegen die Scrollleiste unten oder?

Habe die Anleitung dazu gelesen aber irgendwie finde ich keine Verknüpfung zu dem Problem. Brauche eben noch einen richtungs Pfeil...

[...] was ich noch nicht gelöst habe ist der horizontale Scrollbalken [...]

Das ist das Resultat der 4 verwendeten, extrem breiten Farbflächen (s. Screenshot) die du hinter den Seiteninhalt gelegt hast.

Die sind in der Breite (ca. 3.000px) nicht ohne Scrollbalken darstellbar, es sei denn, Du legst sie in den Browser Hintergrund der Seite (Pasteboard background).

Dabei kannst Du die Grafiken in der Breite beliebig reduzieren, wenn Du bei gesperrter Pasteboard background Ebene- und nach einem Rechtsklick auf den Seiten Hintergrundbereich, aus dem Kontextmenü die Option "Browserbreite ausfüllen" aktivierst.

So angelegte Grafiken füllen (unabhängig von der tatsächlichen Breite) immer den kompletten Browser Fensterbereich aus, ohne den Scrollbalken zu aktivieren. Außerdem scrollen sie, wenn erforderlich,  automatisch mit dem Seiteninhalt. Jede Seite, die eine Grafik in Browser Fensterbreite enthalten soll, muss so bearbeitet werden.

Der schwarze Balken, der auf allen Seitenhinter der NavBar liegen soll, darf nicht scrollen, da er permanent hinter der fixierten NavBar zu sehen sein soll. Er muss also das  Attribut "Fest" bekommen und er darf nur auf einer Seite angelegt werden, z. B. auf der index Seite.
Dazu öffnest Du das Schloss der Ebene Pasteboard background und stellst nach einem Rechtsklick auf den Balken im Editorfenster, im Kontextmenü die Option "Fest" ein:

Wenn das geschafft ist, kannst Du zumindest die Desktop Version Deiner Site online stellen...

Der Einbau des one Button Menüs für die Mobilseite funktioniert prinzipiell genauso.

Zunächst lässt Du den WD aus der normalen NavBar der Site die mobile one Button Version erstellen. Die kopierst Du auf eine 2. leere Seite "navbar2", die Du dazu im Mobilbereich anlegst. auf den anderen Mobilseiten kannst Du die NavBar danach löschen.

Dann änderst Du die ID- und den Link auf die NavBar im CSS/JS Code wie unten gezeigt und legst auf den Mobilseiten einen Platzhalter mit diesem neuen Code im HTML Body an:

----------------------
<style type="text/css">
#f2 {position: fixed;
top: 20px;
left: 50% ;
margin-left: -100px;
height: 350px;
width: 200px;
}
</style>

<div id="f2">
<iframe width= "100%" height="100%" allowTransparency="true" scrolling="no" frameborder="0" src="navbar2.htm" style="display: block;" align="left">
</iframe>
</div>
-----------------

Die zu ändernden Werte sind oben gelb markiert. Besonders wichtig ist die ID (hier "f2") und der Name der 2. Seite für die mobile Version der NavBar (hier "navbar2.htm"). Die anderen Werte sind abhängig von der Größe der mobilen NavBar und von der Anzahl der verlinkten Seiten.

Damit die NavBar der Mobilvariante nicht permanent einen weißen Hintergrund im Bereich des Klappmenüs zeigt, musst Du die Datei "xr_main.css" patchen, die Du nach einem Export des Projekts im Verzeichnis "index_htm,_files" findest.

Hier muss in der in der 2. Zeile der Wert für "background-color:" gelöscht werden:

Konkret muss der Hexwert für die Hintergrundfarbe gelöscht werden, hier "ffffff" (grün markiert). Das Hash Zeichen "#" muss stehen bleiben!

Die geänderte Datei muss in ein separates Verzeichnis kopiert werden, damit Du sie nach einem Export/Upload der Projektdatei manuell in das Verzeichnis "index_htm_files" kopieren kannst. Das kann entweder lokal (auf Deinem PC) oder online (auf dem Webserver) sein. Die jeweils im Verzeichnis vorhandene Datei muss dabei überschrieben werden.

• Achtung!
  Der Patch muss nach jedem neuen Export/Upload wiederholt werden, weil der WD bei dieser Aktion Deine Änderungen löscht!

Der Rest sollte mit den schon erworbenen Kenntnissen machbar sein (s. o.)...

Hier kannst Du Dir die online Demo einer Desktop/Mobil Variante ansehen, die ich mit der o. a. Methode erstellt habe...

Viel Erfolg

Danke BeRo

Die Breiten Felder lagen schon im Paste Hintergrund, sie waren nur nicht browserfüllend eingestellt. Das Problem des Scrollbalken lag aber nicht daran sondern es lag an dem Platzhaltzer des IFrame Codes. Ich habe den CSS+IFrame Code anfangs folgendermassen angepasst:

<style type="text/css">
#test {position: fixed; left: 50%; top: 0px; margin-left:-1500px}
</style>

<div id="test">
<iframe width= "3000" height="63" allowtransparency="true" scrolling="no" frameborder="0" src="test.htm" style="display: block;" align="left"></iframe>
</div>

deswegen erschien auch der Scrollbalken immer. Nach dem ich den Platzhalter kurz enfernt habe und die Vorschau betrachtet habe war der Scrollbalken weg. Eindeutiger Hinweis der Platzhalter mit 3000px Länge war der Verusacher!

Jetzt sieht der Code so aus:

<style type="text/css">
#test {position: fixed; left: 50%; top: 0px; margin-left:-480px}
</style>

<div id="test">
<iframe width= "960" height="63" allowtransparency="true" scrolling="no" frameborder="0" src="test.htm" style="display: block;" align="left"></iframe>
</div>

...und der S.Balken ist weg...wobei die margin-left soll nicht -480px sondern -485px sein. Sonst erscheinen Scrollleisten...so war es zumindest bei mir.

Dazu öffnest Du das Schloss der Ebene Pasteboard background und stellst nach einem Rechtsklick auf den Balken im Editorfenster, im Kontextmenü die Option "Fest" ein:

Der letzte Akt:

Jetzt habe ich versucht den Trick mit dem festgesetzten, schwarzen Hintergrund.

Hmmm...ich kann irgendwie nicht nachvollziehen wie ich das machen soll. Wenn ich einen Rechtsklick auf den schwarzen Balken, der in der Paste Hintergrund Ebene liegt mache (Schloss geöffnet) dann erscheint leider keine Option Arbetsbereichhintergrund.

Diese erscheint nur wenn ich ein Rechtsklick irgendwo auf dem Hintergrund mache (ohne das etwas markiert ist sonst ist die Option nicht da))...und da ist schon alles als fest eingestellt...trotzdem scrollt der schwarze H.Grund mit.

http://abireisen.magix.net/test/

Wo mache ich den Fehler...bin aber schon fast am Ziel

[...] Wo mache ich den Fehler... [...]

Ganz einfach: Du versucht die Quadratur des Kreises

Dein Versuch ist zum Scheitern verurteilt, weil ich Dir eine falsche Information gegeben habe.

Richtig wäre gewesen: 

[...] Dazu öffnest schließt Du das Schloss der Ebene Pasteboard background und stellst nach einem Rechtsklick auf den Balken Hintergrundbereich im Editorfenster, im Kontextmenü die Option "Fest" ein: [...]

Dass es bei der Vorbereitung zu meinem Posting funktioniert hat, obwohl das Schloss geöffnet war, lag an den geschlossenen Schlössern der beiden Objekte in der Pasteboard background Ebene.
Im 3. Screenshot meines letzten Postings ist das ja auch schön zu sehen...

Also, noch ein letzter Versuch und dann...

..kein Problem!  Ich bin trotzdem dankbar für jeden Tipp...auch wenn er im "Eifer des Gefechts" nicht richtig angegebn worden ist.

Nun jetzt zum Problem. Ich habe das alles so eingestellt wie du es beschriebn hast. Die Option stand vorher auf scrollen dann habe ich sie auf fest eingestellt...leider brachte das rein gar nichts. Ob es auf scrollen steht oder fest...es verändert sich nichts und der schwarze Balken (broweserfüllend) scrollt "sich weg"

http://abireisen.magix.net/test/

Am liebsten würde ich einen 2 Meter langen Nagel nehmen und den blöden Balken, wohl bemerkt  "festnageln"

Gruß

Vik

[...] leider brachte das rein gar nichts.[...] der schwarze Balken (broweserfüllend) scrollt "sich weg" [...]

Schwer, zu sagen, wo Du den Knoten angelegt hast...

Lade Dir mal hier die Projektdatei meiner Demo herunter. Da solltest Du den Unterschied zu Deiner Projektdatei finden- und entsprechend korrigieren können.

Viel Erfolg

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

P.S.

In der Projektdatei (und in der Demo) sind noch ein paar Änderungen eingeflossen, die aber nur die Hintergrundfarben der beiden NavBars betreffen.
Damit entfällt auch die nachträgliche Änderung der Datei "xr_main.css"!