Fundacja nawigacji przesuwnych (Off-płótnie)
Sidebar nawigacji
Off-Canvas nawigacji slajdów teraz stopniowo stają się coraz bardziej popularne (kliknij na przycisk menu w menu wysuwa się z lewej strony) na stronie mobilnej:
Aby utworzyć nawigacji przesuwne
W celu utworzenia ślizgowego nawigacji przykłady są następujące:
Przykłady
<- Peryferyjny div :! Układ strony ->
<Div class = "OFF płótnie -wrap" danych offcanvas>
<- Element wewnętrzny :! "Paski narzędzi" content (ikony, linki, opis, itp) ->
<Div class = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class sekcja = "left-small ">
Klasa <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class sekcja = "middle Tab- bar-punkt">
<H1 class = "title"> Off-płótnie Przykład </ h1>
</ Section>
</ Nav>
<! - Przesuwne Menu ->
<Poza class = "left-off -canvas-menu">
<! - Dodaj linki lub inne rzeczy tutaj ->
<Ul class = "off-płótno Test -list">
<Li> <label> Treść < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Poza>
<! - Zawartość Główna ->
<Class = sekcja "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Zamknij menu ->
Klasa <A = "exit-off -canvas"> </ a>
</ Div> <! - Koniec zawartość wewnętrznego ->
</ Div> <! - Koniec Menu przesuwne ->
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
<Div class = "OFF płótnie -wrap" danych offcanvas>
<- Element wewnętrzny :! "Paski narzędzi" content (ikony, linki, opis, itp) ->
<Div class = "inner-wrap ">
<Class Nav = "tab-bar ">
<Class sekcja = "left-small ">
Klasa <A = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class sekcja = "middle Tab- bar-punkt">
<H1 class = "title"> Off-płótnie Przykład </ h1>
</ Section>
</ Nav>
<! - Przesuwne Menu ->
<Poza class = "left-off -canvas-menu">
<! - Dodaj linki lub inne rzeczy tutaj ->
<Ul class = "off-płótno Test -list">
<Li> <label> Treść < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Poza>
<! - Zawartość Główna ->
<Class = sekcja "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Zamknij menu ->
Klasa <A = "exit-off -canvas"> </ a>
</ Div> <! - Koniec zawartość wewnętrznego ->
</ Div> <! - Koniec Menu przesuwne ->
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »