DokuWiki

Site Tools

Trace:
Hotfix release available: 2025-05-14b "Librarian". upgrade now! [56.2] (what's this?)
Hotfix release available: 2025-05-14a "Librarian". upgrade now! [56.1] (what's this?)
New release available: 2025-05-14 "Librarian". upgrade now! [56] (what's this?)
Hotfix release available: 2024-02-06b "Kaos". upgrade now! [55.2] (what's this?)
Hotfix release available: 2024-02-06a "Kaos". upgrade now! [55.1] (what's this?)
New release available: 2024-02-06 "Kaos". upgrade now! [55] (what's this?)
Hotfix release available: 2023-04-04b "Jack Jackrum". upgrade now! [54.2] (what's this?)
code-schnipsel:css:off-canvas-menu

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
code-schnipsel:css:off-canvas-menu [2016/05/23 09:16] – sieczkarekcode-schnipsel:css:off-canvas-menu [2024/01/05 13:07] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +**Anleitung für ein Off-Canvas-Menu / Sidekick** 
  
 +http://www.cssscript.com/pure-css-sidebar-toggle-menu-sidekick/
 +
 +  - sidekick.css einbinden
 +  - Ein Toggle Menu erstellen
 +  - Sidebar Navigation erstellen
 +  - Der komplette Seiteninhalt muss in die Class="sidekick-body" erstellt werden
 +
 +<code>
 +  <span class="sr-only">Menu Toggle</span>
 +    </label><!-- toggle menu -->
 + <div class="sidekick">
 +   <nav class="sidekick-panel">
 +             <h1>Sidekick Menu</h1>
 +               <ul>
 +                  <li><a href="#">Nav Item 1</a></li>
 +                  <li><a href="#">Nav Item 2</a></li>
 +                  <li><a href="#">Nav Item 3</a></li>
 +                  <li><a href="#">Nav Item 4</a></li>
 +              </ul>
 +        </nav><!-- toggle menu -->
 +     
 +     <div class="sidekick-body">
 +       <!-- content -->
 +     </div>  
 +</code>