Slideout Menü für rechte Seite (jQuery)

[Fachchaot]

Hallo zusammen,

ich suche ein Script das ein Slideout Menü am rechten Rand der Webseite anzeigt, z.B. wie hier: belauscht.de – Deutschland im O-Ton

Weiß jemand wo ich so ein jQuery Script finde?

[rny]

Der Effekt ist in dem Fall nur CSS (transition, Bsp.: Edit this Fiddle - jsFiddle)

Wenn du das mit jQuery lösen willst, würde ich mir mal die Doku für .slideToggle() genauer anschauen, damit dürfte das relativ problemlos gehen. (.slideToggle() | jQuery API Documentation)

edit: Übrigens sind sind zum Erkunden von so Spielereien FireBug bzw. mittlerweile auch einfach die Web Dev Tools von Firefox/IE sehr praktisch.

Bearbeitet 10. Juli 2013 von rny

[Fachchaot]

Danke für den Tipp mit dem CSS. Leider kapiert der IE das nicht. Dort wird die Box nicht langsam größer sondern springt auf.

[Fachchaot]

Ich hab's jetzt mit jQuery so halbwegs gelöst. Mein Problem ist die Positionierung am rechten Rand. Das Menü soll immer sichtbar sein, auch bei einer niedrigeren Auflösung. Heißt ja, ich müsste position: absolute; anstatt position: relative; verwenden. Damit funktioniert das Ganze aber nicht. Aber bei position: relative verschwindet das Menü, sobald das Browserfenster verkleinert wird.

Edit this Fiddle - jsFiddle

[rny]

Hab heute nicht viel Zeit zum schauen, aber vielleicht hilft ja das Beispiel, so könnte es wohl klappen und du hast ein position: absolute mit drin.

Edit this Fiddle - jsFiddle

[Fachchaot]

Schon mal danke für deine Hilfe rny.

Im Prinzip genau so. Allerdings möchte ich anfangs nur einen Teil des divs zeigen (z.B. ein Icon). Erst beim Mouseover fährt das div nach links raus und man sieht den Linktext. Das ist genau mein Problem. Hier mein Versuch:

Edit this Fiddle - jsFiddle

[Thomas2903]

Hi Fachchaot:

Du kannst ein übergeordnetes DIV auf die Größe des Browserfensters anlegen. Über ein Scroll oder Window (change?) Event kannst du die Breite des DIVs auf Brwosergröße anpassen. Wegen dem Event, das weiß ich jetzt nicht auswendig welches.

Wenn du die rechte Maustaste drückst, kannst du mit "Inspect Element" dir anschauen, wie die Homepage gemacht wurde. Ich glaube, du benötigst dafür das Firebug Plugin, bin aber nicht sicher. Aber für Webentwicklung ist der Firebug sowieso sehr hilfreich.

Bearbeitet 15. Juli 2013 von Thomas2903

[Fachchaot]

Danke an alle! Ihr habt mich "auf den richtigen Weg gebracht".

Ich hab's jetzt mit CSS gelöst. Der Slide-Effekt kommt zwar im IE nicht rüber, aber man kann ja nicht alles haben.

Edit this Fiddle - jsFiddle

[Fachchaot]

Danke an alle! Ihr habt mich "auf den richtigen Weg gebracht".

Ich hab's jetzt mit CSS gelöst. Der Slide-Effekt kommt zwar im IE nicht rüber, aber man kann ja nicht alles haben.

Edit this Fiddle - jsFiddle

[rny]

Daumen hoch für die reine CSS-Lösung

[Fachchaot]

@rny: Danke für deinen Beispiel-Code!