Ich hab' jetzt etwas mit den Demoseiten zum Slideout Widget rumgespielt und wollte es in meine bestehende Seite integrieren. Allerdings verstehe ich den konkreten Zusammenhang zwischen den Elementen der Demoseiten nicht wirklich. Was benötige ich wofür, welche Optionen (data-xxx) gibt es für welches Widget usw.
Prinzipiell brauche ich nur ein Symbol in meinem Header, auf das ich klicke und das Menü soll von links reinfahren. Der Header soll dabei nach rechts verschoben werden. Zufriedenstellend hat es bisher noch nicht funktioniert, weil:
- mein Header semitransparent war, mit den Slideout Beispielen ist er immer Opak
- unter dem Header eine 3D-Linie angezeigt wird - kann man die ausblenden ?
edit:
Ich hab mittlerweile ein funktionierendes Slideout Menü hinbekommen...
Ein Problem habe ich allerdings noch:
Wenn ich das Menü öffne, wird die Seite wie gewünscht nach rechts geschoben (translate3d ...) und im Anschluss das Menü sichtbar geschaltet (display: block;) - schließe ich das Menü, wird umgekehrt erst die Seite wieder nach links (über das Menü !!) geschoben und erst dann das Menüs ausgeblendet (display: none;). Kann man das nicht etwas "flüssiger" hinbekommen ? In vielen Beispielen habe ich z.B. gesehen, daß das Menü zusammen mit der Seite verschoben wird...
Meine Unterseiten sind (semi-)transparent über dem Seitenhintergrund (im <body> Tag).
im HTML sieht es folgendermaßen aus:
<body>
...
<nav id="menu" style="background-color:rgba(0,0,0,0.7)">
... Menüpunkte
</nav>
<main id="panel" class="">
... Seiteninhalt (Gridster usw.)
<div class="cell-1-10 big center" data-type="slideout" data-icon-color="Linen"></div>
</main>
</body>