menu wird abgeschintten

[mutanton]

Hi Leute,

Ich habe auf dieser Seite hier ein fixed menu, welches sich in einem div mit 100% höhe befindet. Allerdings schneidet der browser das menu dadurch ab einer bestimmten Fenster größe ab. Und das würde ich gerne verhindern. Also so dass es mit scrollt sobald das fenster kleiner als das menu ist.
Geht das und wenn ja wie?

Der code ist noch ziemlich wurschtelig, weil ich grade noch im Aufbau bin und noch nicht 'aufgeräumt' habe. Ich hoffe ihr blickt trotzdem durch...

Vielen Dank schonmal für eure Hilfe!

Gruß,
- mutanton

 

[Cheffchen]

Hallo,

nutzt ja schon jquery.
also einfach Fenstergröße (viewport) auslesen und bei einer krietischen größe vielleicht 400px eine classe einfügen bei #menu-col und die Position von fixed in absolute ändern.

zu dem rest sage ich mal nicht viel ausser das aufräumen nicht reicht.
Tabelle als menü, da ist ein </div> zu viel drin....


Cheffchen

 

[Marv]

Hi,

sieht für mich danach aus, als würde das aktuell bei dir auf der Seite schon so laufen wie gewünscht?
Das Einzige was du noch optimieren könntest, dass bei Verkleinern des Browserfensters das Menü sichtbar bleibt, ist, der ID #menu-col die CSS Eigenschaft min-height wegzunehmen.

 

[mutanton]

Hi!

Erstmal vielen Dank für die schnelle Rückmeldung.

@cheffchen: leider habe ich von Java keine Ahnung und würde deshalb eine CSS Lösung bevorzugen... Wenn es die denn gibt ansonsten muss ich mich mal damit beschäftigen...

@Marv: leider nicht klappt es nicht so wie ich es mir vorstelle und auch jetzt wo ich min-height raus genommen habe wird das menu noch abgeschnitten. hast du vllt noch ne Idee wodran das liegn kann?

 

[Marv]

Hallo,

erstmal ist Java und JavaScript was völlig anderes, hier bitte differenzieren und das richtige schrieben. Der Lösungsansatz von Cheffchen sollte mit JQuery einfach umzusetzen sein, auch wenn hier eventuell eine Erläuterung für die Umsetzung für Anfänger hilfreich wäre.

Zu deiner Frage: Kannst du eventuell näher beschreiben wie du dir das Verhalten der Menüpunkte / Menüs? beim verkleinern des Browserfensters vorstellst? Eventuell mit Bildern / Screenshots.
Sonst verstehe ich nicht ganz was dein Ziel ist / es du dir vorstellst, da sich dein Menü ja aktuell schon beim Verkleinern des Browserfensters mitbewegt.
Welchen Browser benutzt du eigentlich?

 

[mutanton]

Oh, klar ich meinte natürlich JavaScript...
Ich benutzt Firefox, die lösung sollte natürlich aber auch bei anderen Browsern funktionieren...


Ich habe mich eben gaube ich auch falsch aus gedrückt! Ich möchte verhindern das das Menu bei zu kleinem fenster mitscrollt.

Aber nochmal von Anfang:
Das Mitbewegen klappt so wie ich mir das vorstelle nur wenn das Fenster zu klein wird passiert folgendes:

Wie hier zusehen ist fehlen nun teile des Menüs und dadurch das es fixed ist nützt auch das scrollen nichts.
Ich hätte jetzt gerne, dass das Menü in diesem Fall nicht mehr mit scrolled und mann so beim scrollen nach und nach das gesamte Menü erreichen kann...

Ich hoffe das ist jetzt verständlicher. Entschuldigt bitte meine Ausdrucksweise. Aber ich bin halt eine Laie und wurschtel mich hier so durch wie es eben geht...

Danke für eure Mühen...

 

[scbawik]

Versuchs mal mit dem CSS:

@media all and (max-height : 400px) {
    #menu-col {
        position:absolute !important;
    }
}

 

[Cheffchen]

Hallo,

genau das geht ja auch mit rein css, ich mach doch zu oft mit CMS rum :O).

Also das von @scbawik wenn menü eine feste anzahl von punkten hat und damit eine feste höhe aber wann das stark wechseln kann, dann jquery.
Zb. CMS dann halt per jquery was ja recht einfach geht siehe hier: x_bei zu klein viewport fixed in absolute - jsFiddle

Cheffchen

 

[mutanton]

Genial!

Hat super geklappt! Vielen Dank!!!