responsive navigation – Javascript/CSS Problem

[thme]

Guten Tag

Ich bin dabei eine Website zu erstellen. Im Web habe ich eine responsive-navigation gefunden, die ich auch oft erfolgreich einsetzen konnte (http://responsive-nav.com).

In diesem Fall ist es etwas anders, da ich innerhalb der Navigation ein Dropdown eingefügt habe (Navi-Punkt "Pilots Corner").

Das Problem erscheint nur, wenn man das Browserfenster so weit zusammenzieht, bis die Mobile-Ansicht aktiviert wird. Dann über das Icon oben rechts die Navi aufklappen, dann die Subnavigation öffnen.

Jetzt sieht man, dass sich der Bereich nicht dynamisch in der Höhe anpasst, sondern die Navigation angeschnitten wird.

Es liegt wohl daran, dass via dem Javascript von der responsive-nav eine fixe Höhe eingegeben wird. Soviel konnte ich via Firebug herausfinden, doch alle Lösungsversuche sind gescheitert.

Gibt es dafür eine Lösung, dass die Navigation nicht angeschnitten wird?

Testseite:
Javascript: responsive-nav.js ()

Vielen Dank für jede Hilfe!
Gruss
Thme

 

[Isometric]

AW: responsive navigation – Javascript/CSS Problem

Was hältst du davon für die "Mobile-Ansicht" eine andere Navigation zu verwenden?

Ein Beispiel, wie das aussehen kann findest du hier:

http://www.initializr.com/try

 

[thme]

AW: responsive navigation – Javascript/CSS Problem

Hi Isometric

Es wäre schon schön, wenn man die Navigation in der Mobile-Ansicht aufklappen könnte, damit sie nicht von Anfang an so viel Platz wegnimmt.

Wenn ich im Firebug unter Styles bei ".nav-collapse.opened" die max-height wieder auf 9999px stelle, funktioniert alles perfekt. Es liegt alles nur an dieser fixen höhe.

Ich habe die ganze Zeit versucht dem onClick Event, der auch das DropDown auslöst, einen javascript-Befehl hinzuzufügen, der die css-Eigenschaft entsprechend ändert. Ich habe es aber nicht geschafft...

Ich bin so kurz vor dem Ziel und nicht bereit aufzugeben ^^

 

[Isometric]

AW: responsive navigation – Javascript/CSS Problem

Ich habe deine Seite mal mit einem Android-Handy aufgerufen. Dort wird die aufklappenden Navigation nicht (bzw. nur kurz) abgeschnitten.

Wenn man auf dem Handy nach oben scrollt ist alles sichtbar,

 

[thme]

AW: responsive navigation – Javascript/CSS Problem

Also wenn ich die Seite in landscape öffne (wo die Navi noch in der linken Spalte erscheint) und ich dann das Submenu öffne, und dann in die portrait-ansicht wechsle, dann stimme ich mit dir überein. Wenn ich allerdings die Seite in der Portrait-Ansich neu lade, kommt der selbe Fehler wie immer.

Ich bin jetzt am überlegen, die Subnavigation immer eingeblendet zu lassen. Ist zwar schade, aber wenns nicht anders geht...

 

[thme]

AW: responsive navigation – Javascript/CSS Problem

So, ich habe jetzt eine Lösung gefudnen. Ich habe das overflow auf visible gestellt und der Navi eine durchgehende Farbfläche gegeben. Jezt überlappt die Navi einfach den Inhalt und nicht umekehrt.

Damit kann ich leben

Nochmals danke für die Hilfe! Alleine kommt man malchmal einfach nicht auf die treffende Idee...

Gruss
thme