/ / Foundation 5 Off-Canvas-Transformation - CSS, responsive-design, zurb-foundation

Foundation 5 Off-Canvas-Transformation - CSS, responsive-design, zurb-foundation

Gibt es eine Möglichkeit, die Off-Canvas zu transformieren?Navigation in Foundation 5 zu einer Sidebar-Navigation? Zum Beispiel verwenden die offiziellen Dokumente der Foundation 5 Sichtbarkeitsklassen, aber wird dadurch nicht der Zweck durch zwei separate Navigationen besiegt?

Ich möchte mit Foundation 5 so etwas erreichen:

Bildbeschreibung hier eingeben

Antworten:

4 für die Antwort № 1

Sie können dies tun, indem Sie die CSS-Regeln außerhalb des Canvas überschreiben. Hier ist der Anfang einer Lösung:

@media (min-width: 700px) {
.left-off-canvas-menu,
.right-off-canvas-menu {
position: static;
transform: none;
float: left;
}
.move-right > .inner-wrap {
transform: none;
}
.main-section {
overflow: hidden;
}
}

Sie können mit diesem Code spielen dieses Spiel.

Prost, Thomas.


1 für die Antwort № 2

Die Lösung ist eigentlich viel einfacher:

@media (min-width: 700px) {
div.off-canvas-wrap {
> .inner-wrap {
@include translate3d($off-canvas-width,0,0);
}
}
div.exit-off-canvas { display: none; }
}