Stiftung Schiebe Navigation (Off-Leinwand)
Sidebar-Navigation
Off-Leinwand-Dia-Navigation jetzt allmählich mehr und mehr populär (klicken Sie auf die Menü-Taste auf das Menü von links gleitet) in einer mobilen Seite:
So erstellen Sie eine gleitende Navigation
So erstellen Sie eine gleitende Navigation Beispiele sind wie folgt:
Beispiele
<- Äußerste div :! Seitenlayout ->
<Div class = "off-Leinwand -wrap" Daten-offcanvas>
<- Interne Element :! "Symbolleisten" Inhalt (Icons, Links, Beschreibung, 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 Schnitt">
<H1 class = "title"> Off-Leinwand - Beispiel </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<Neben class = "left-off -canvas-Menü">
<! - Fügen Sie Links oder andere Sachen hier ->
<Ul class = "off-Leinwand -Liste Test">
<Li> <label> Überschrift < / label> </ li>
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Abgesehen>
<! - Hauptinhalt ->
<Section class = "Hauptschnitt ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Schließen Sie das Menü ->
<A Class = "exit-off -canvas"> </ a>
</ Div> <! - End interne Inhalt ->
</ Div> <! - End Schiebe - Menü ->
<! - Initialisierung Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
<Div class = "off-Leinwand -wrap" Daten-offcanvas>
<- Interne Element :! "Symbolleisten" Inhalt (Icons, Links, Beschreibung, 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 Schnitt">
<H1 class = "title"> Off-Leinwand - Beispiel </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<Neben class = "left-off -canvas-Menü">
<! - Fügen Sie Links oder andere Sachen hier ->
<Ul class = "off-Leinwand -Liste Test">
<Li> <label> Überschrift < / label> </ li>
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Abgesehen>
<! - Hauptinhalt ->
<Section class = "Hauptschnitt ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Schließen Sie das Menü ->
<A Class = "exit-off -canvas"> </ a>
</ Div> <! - End interne Inhalt ->
</ Div> <! - End Schiebe - Menü ->
<! - Initialisierung Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »