Fondazione navigazione scorrevole (Off-Canvas)
navigazione Sidebar
Off-Canvas navigazione scorrevole ora diventano gradualmente sempre più popolare (cliccare sul tasto del menu sul menu scivola fuori da sinistra) in una pagina cellulare:
Per creare una navigazione scorrevole
Per creare una navigazione scorrevole esempi sono i seguenti:
Esempi
<- Div Outermost :! Layout di pagina ->
<Div class = "off-tela -wrap" data-offcanvas>
<- Elemento interno :! "Barre degli strumenti" di contenuti (icone, link, descrizione, ecc) ->
<Div class = "interno-wrap ">
<Class = Nav "tab-bar ">
<Class Sezione = "left-small ">
class = <A "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Sezione = "tab- mezzo bar-sezione">
<Class H1 = "title"> Off-tela Esempio </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<A parte class = "left-off -canvas-menu">
<! - Aggiungere link o altre cose qui ->
<Ul class = "off-tela prova -list">
<Li> <label> Titolo < / label> </ li>
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aside>
<! - Contenuto principale ->
<Class = Sezione "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Chiudere il menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - Fine contenuti interni ->
</ Div> <! - Menu a scorrimento End ->
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
<Div class = "off-tela -wrap" data-offcanvas>
<- Elemento interno :! "Barre degli strumenti" di contenuti (icone, link, descrizione, ecc) ->
<Div class = "interno-wrap ">
<Class = Nav "tab-bar ">
<Class Sezione = "left-small ">
class = <A "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Sezione = "tab- mezzo bar-sezione">
<Class H1 = "title"> Off-tela Esempio </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<A parte class = "left-off -canvas-menu">
<! - Aggiungere link o altre cose qui ->
<Ul class = "off-tela prova -list">
<Li> <label> Titolo < / label> </ li>
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aside>
<! - Contenuto principale ->
<Class = Sezione "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Chiudere il menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - Fine contenuti interni ->
</ Div> <! - Menu a scorrimento End ->
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »