Sidebar-Navigation bei mobiler Darstellung
Veröffentlichungsdatum: 20. Oktober 2014
Änderungsdatum: 06. März 2018
navigation sidebar mobile responsive
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.
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.
In aktuellen BASE Classic Projekten kann die Sidebar komfortabel über den Layoutwizard aktiviert werden.
- Welche Alternative zur klassischen mobilen Aufklappnavigation bietet der Artikel?
- Der Artikel beschreibt eine CSS-only Sidebar-Navigation als Alternative zur klassischen mobilen Aufklappnavigation. Dabei fährt der Inhaltsbereich mit der aufklappenden Navigation nach rechts weg.
- Was passiert beim Aufklappen der Sidebar-Navigation mit dem Inhaltsbereich?
- Beim Navigationstyp „Sidebar“ bewegt sich der Inhaltsbereich mit der aufklappenden Navigation nach rechts.
- Ist die Sidebar-Navigation in aktuellen Projekten bereits vorkonfiguriert?
- Ja. In aktuellen Projekten ist diese Möglichkeit bereits im Standard vordefiniert und muss lediglich aktiviert sowie bei Bedarf individuell angepasst werden.
- Wie kann ich die Sidebar-Navigation in der design.css aktivieren?
- Durch eine CSS-Anpassung im Bereich der Datei „design.css“: <code class="codeInline">#blockMainOuter {-w-add-classes:nextToSidebar,moveWithSidebar;-w-jquery:jQuery("#blockMainOuter").before('<div id="navigationSidebar"/>')}</code> Der gleiche Block wird sowohl für inaktive als auch aktivierte Variante genannt; entscheidend ist die entsprechende Aktivierung im Projektkontext.
- Kann ich die Sidebar-Navigation auch für andere Auflösungen nutzen?
- Ja. Dafür genügt es, die CSS-Definition im passenden Media-Query unterzubringen und die Aktivierung in der „design.js“ entsprechend anzupassen.
- Wie kann ich die Sidebar-Navigation in aktuellen Projekten besonders bequem aktivieren?
- In aktuellen Projekten kann die Sidebar-Navigation komfortabel über den Layoutwizard aktiviert werden.