Foundation Sliding Navigation (Off-Canvas)


May 04, 2021 12:00 Foundation5


Table of contents


Foundation Sliding Navigation (Off-Canvas)


Sidebar navigation

Off-Canvas sliding navigation is becoming increasingly popular on mobile pages (click the menu button menu to slide out from the left):


Create a sliding navigation

Create a sliding navigation instance as follows:

Instance

slt;!-- Outerst div: Page layout --gt;
< div class= "off-canvas-wrap" data-offcanvas >
Internal !--: "Toolbar" content (icons, links, descriptions, etc.)--gt;
< div class= "inner-wrap" >
< nav class= "tab-bar" >
< section class= "left-small" >
< a class= "left-off-canvas-toggle menu-icon" href= "#" > < span > < /span > < /a >
< /section >

< section class= "middle tab-bar-section" >
< h1 class= "title" > Off-canvas Example < /h1 >
< /section >
< /nav >

<!-- 滑动菜单 -->
< aside class= "left-off-canvas-menu" >
<!-- Add links or other stuff here -->
< ul class= "off-canvas-list test" >
< li > < label > Heading < /label > < /li >
< li > < a href= "#" > Link 1 < /a > < /li >
< li > < a href= "#" > Link 2 < /a > < /li >
...
< /ul >
< /aside >

<!-- 主要内容 -->
< section class= "main-section" >
< h3 > Lorem Ipsum < /h3 >
< p > .... < /p >
< /section >

The menu !-- closed at the time of the change
< a class= "exit-off-canvas" > < /a >

< /div sgt; slt;!-- ends the internal content --
< /div sgt; slt;!-- ends the sliding menu --

The !-- initialize Foundation JS
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .