Latest web development tutorials

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>
...
</ Ul>
</ Aside>

<! - Main content ->
<Section class = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ 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>

try it"