Foundation Sliding Navigation (Off-Canvas)
May 04, 2021
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 . . .