Navigation coulissante Foundation (Off-Canvas)
navigation Sidebar
Off-Toile navigation de diapositives maintenant devenir progressivement de plus en plus populaire (cliquez sur le bouton de menu dans le menu glisse à partir de la gauche) dans une page mobile:
Pour créer une navigation coulissante
Pour créer un système de navigation de glissement exemples sont les suivants:
Exemples
<- Div Outermost :! Mise en page ->
<Class Div = "off-canvas de données offcanvas de">
<- Élément interne :! "Barres d' outils" contenu (icônes, liens, description, etc.) ->
<Class Div = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class Section = "left-small ">
classe <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Section = "tabulations milieu bar-section">
<Class H1 = "title"> Off-canvas Exemple </ h1>
</ Section>
</ Nav>
<! - Menu coulissant ->
<Mis class = "left-off -Toile-menu">
<! - Ajouter des liens ou d' autres choses ici ->
<Class Ul = "off-canvas test -list">
<Li> <label> Rubrique < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aside>
<! - Contenu principal ->
<Class Section = "principale section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Fermez le menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - Fin contenu interne ->
</ Div> <! - End sliding menu ->
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
<Class Div = "off-canvas de données offcanvas de">
<- Élément interne :! "Barres d' outils" contenu (icônes, liens, description, etc.) ->
<Class Div = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class Section = "left-small ">
classe <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Section = "tabulations milieu bar-section">
<Class H1 = "title"> Off-canvas Exemple </ h1>
</ Section>
</ Nav>
<! - Menu coulissant ->
<Mis class = "left-off -Toile-menu">
<! - Ajouter des liens ou d' autres choses ici ->
<Class Ul = "off-canvas test -list">
<Li> <label> Rubrique < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aside>
<! - Contenu principal ->
<Class Section = "principale section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Fermez le menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - Fin contenu interne ->
</ Div> <! - End sliding menu ->
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »