Anzeige

responsive navigation – Javascript/CSS Problem

responsive navigation – Javascript/CSS Problem | PSD-Tutorials.de

Erstellt von thme, 27.11.2013.

  1. thme

    thme Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    4
    Geschlecht:
    weiblich
    responsive navigation – Javascript/CSS Problem
    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: http://www.thme.ch/aaa-testseite/
    Javascript: responsive-nav.js (http://www.thme.ch/aaa-testseite/js/responsive-nav.js)

    Vielen Dank für jede Hilfe!
    Gruss
    Thme
     
    #1      
  2. Isometric

    Isometric Powerproster

    Dabei seit:
    14.04.2009
    Beiträge:
    153
    Geschlecht:
    männlich
    responsive navigation – Javascript/CSS Problem
    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
     
    #2      
  3. thme

    thme Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    4
    Geschlecht:
    weiblich
    responsive navigation – Javascript/CSS Problem
    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 ^^
     
    #3      
  4. Isometric

    Isometric Powerproster

    Dabei seit:
    14.04.2009
    Beiträge:
    153
    Geschlecht:
    männlich
    responsive navigation – Javascript/CSS Problem
    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,
     
    #4      
  5. thme

    thme Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    4
    Geschlecht:
    weiblich
    responsive navigation – Javascript/CSS Problem
    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...
     
    #5      
  6. thme

    thme Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    4
    Geschlecht:
    weiblich
    responsive navigation – Javascript/CSS Problem
    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
     
    #6      
Seobility SEO Tool
x
×
×