Sidebar - Erweiterung die von rechts reinfährt...

[macjag]

Hallo @all,

gibt es in Contao eine bestehende Erweiterung mit der eine Sidebar die z.B. am rechten Browserrand fest steht
und beim anklicken nach links sich vergrößert. Sieht man oft als Kontaktbereich.

Beispiel:
http://www.izzyfeedback.com/

Welche Alternative gibt es?

Vielen Dank für jede Lösung & Tipp.
macjag

[Andreas]

Dazu brauchst du nur deine Slidebar zu stylen wie du sie haben möchtest, mit den zwei Möglichkeiten auf- und zugeklappt. Am besten, wenn sich beide Zustände nur durch eine CSS-Eigenschaft unterscheiden, z.B. width oder left.

Dann kannst du mit ein wenig Javascript diese CSS-Eigenschaft animiert von einem Wert auf den anderen bringen. Mit tween kannst du eine CSS-Eigenschaft animieren und mit morph beliebig viele gleichzeitig. http://mootools.net/docs/core/Fx/Fx.Tween

Mit addEvent setzt du noch das Event, bei dem die Bar aufklappen soll, z.B. 'mouseenter' und 'mouseleave'. http://mootools.net/docs/core/Element/Element.Event

Beispiel: moo_slidebar.xhtml|html5

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

  var
    mySlidebar = $$('#header .mod_navigation')[0],

    myAnimation = new Fx.Tween(mySlidebar, {
      transition: 'bounce:out',
      property: 'left'
    })
  ;

  mySlidebar.setStyles({
    position: 'fixed',
    width: 200,
    background: '#fff',
    left: -180
  });

  mySlidebar.addEvents({
    mouseenter: function(){
      myAnimation.start(0);
    },
    mouseleave: function(){
      myAnimation.start(-180);
    }
  });

});
/* ]]> */
</script>

[macjag]

Hallo und vielen Dank für den Tipp.

Hab es jetzt nur mit CSS gelöst
ohne großen Slideeffekt. Kunde
wollte mal wieder schnelle einfache Lösung.
Getreu dem Motto - eine Erweiterung in 2 Min installieren
und fertig.

Grüße
macjag

[operatorone]

Kannst du kurz deinen Code für das CSS was du verwendet hast hier posten. Danke.

[Bas]

Hab es jetzt nur mit CSS gelöst ohne großen Slideeffekt.

Wenn Du das ein- und ausblenden nicht einfach mittels display:none; und display:block; machst, sondern z.B. mittels Änderung von 'left' - brauchst Du auch bei CSS nicht auf Slideffekte zu verzichten, siehe z.B. hier: http://www.css3.info/preview/css3-transitions/

[operatorone]

Super, danke für den Link. Geht das auch mit IE8+? Ich glaube da, wird das nicht unterstützt und ich muss doch eine Javascript-Variante verwenden. Der hier gepostete Script geht auch gut, nur leider nicht auf dem iPad, weil das kein mouseenter unterstützt. Vielleicht kennst du dafür auch eine Lösung.

Viele Grüße,
operatorone

[Bas]

Super, danke für den Link. Geht das auch mit IE8+? Ich glaube da, wird das nicht unterstützt und ich muss doch eine Javascript-Variante verwenden.

Wenn keine Transitions unterstützt werden, hast Du die Funktion trotzdem, nur nicht animiert, ich denke das ist für veraltete Browser zuzumuten (aber das mag man anders sehen).

Der hier gepostete Script geht auch gut, nur leider nicht auf dem iPad, weil das kein mouseenter unterstützt. Vielleicht kennst du dafür auch eine Lösung.

Lösung: Hover-Event durch Tap-Event (o.ä.) ersetzen.
Dafür ... Modernizr mit Touch-Detection (http://modernizr.com/download/) und eine beliebige Touch-Bibliothek (hammer.js oder jQuery-Mobile) integrieren.

if((Modernizr.touch) || (window.navigator.msPointerEnabled)) {
  // Aktionen für Touch-Geräte
} else {
  // Aktionen für non-Touch
}

Nach dem Prinzip mach ich sowas.
(Das "window.navigator.msPointerEnabled" in der ersten Zeile ist für IE10-Touch, weil dieser vom Modernizr nicht ordentlich erkannt wird - Microsoft geht mal wieder nen eigenen Weg.)

[operatorone]

Hi Bas,

cool, danke für die Hilfe. Ich werde mal sehen wie ich es hinbekommen.

Viele Grüße,
operatorone