The best Foundation sliding navigation (Off-Canvas) Tutorial In 2024, In this tutorial you can learn
Sidebar navigation,To create a sliding navigation,
Foundation sliding navigation (Off-Canvas)
Sidebar navigation
Off-Canvas slide navigation now gradually become more and more popular (click on the menu button on the menu slides out from the left) in a mobile page:
To create a sliding navigation
To create a sliding navigation examples are as follows:
Examples
<- Outermost div:! Page Layout ->
<Div class = "off-canvas -wrap" data-offcanvas>
<- Internal element:! "Toolbars" content (icons, links, description, etc.) ->
<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>
<! - Sliding Menu ->
<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>
/en.
</ Ul>
</ Aside>
<! - Main content ->
<Section class = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> /en/en </ p>
</ Section>
<! - Close the menu ->
<A class = "exit-off -canvas"> </ a>
</ Div> <-! End internal content ->
</ Div> <-! End sliding menu ->
<! - Initialization Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>