Slideout Menü für rechte Seite (jQuery)

Veröffentlicht 10. Juli 201312 j

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?

10. Juli 201312 j

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 201312 j von rny

11. Juli 201312 j

Autor

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.

11. Juli 201312 j

Autor

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

11. Juli 201312 j

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

15. Juli 201312 j

Autor

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

15. Juli 201312 j

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.