Sidebar-Navigation bei mobiler Darstellung

20. Okt 2014

Als Alternative zur klassischen mobilen Aufklappnavigation können Sie über CSS-Only auch eine Sidebar-Navigation anbieten.

Als Alternative zur klassischen mobilen Aufklappnavigation können Sie über CSS-Only auch eine Sidebar-Navigation anbieten. Bei diesem Navigationstyp fährt der Inhaltsbereich mit der aufklappenden Navigation nach rechts weg.

Diese Möglichkeit ist in aktuellen BASE Projekten bereits im Standard vordefiniert und muß lediglich aktiviert und bei Bedarf individuell angepasst werden.

Sidebar Navigation geschlossenzoom
Sidebar Navigation geschlossen
Sidebar Navigation geöffnetzoom
Sidebar Navigation geöffnet
 

Die Sidebar-Navigation können Sie in der design.css aktivieren, indem Sie folgende Anpassung vornehmen.

Sidebar-Navigation inaktiv

 #_blockMainOuter    {-w-add-classes:nextToSidebar,moveWithSidebar;-w-jquery:jQuery("#blockMainOuter").before('<div id="navigationSidebar"/>')}

Sidebar-Navigation aktiv

#blockMainOuter    {-w-add-classes:nextToSidebar,moveWithSidebar;-w-jquery:jQuery("#blockMainOuter").before('<div id="navigationSidebar"/>')}

Wenn Sie die Sidebar-Navigation für eine andere Auflösung nutzen wollen, genügt es, die CSS-Definition im entsprechenden Media-Query unterzubringen und die Aktivierung in der design.js anzupassen.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG