Fundación de navegación deslizante (fuera del lienzo)
barra lateral de navegación
Fuera de la lona de exploración de diapositivas ahora convertido gradualmente más y más popular (haga clic en el botón de menú en el menú se desliza desde la izquierda) en una página móvil:
Para crear una navegación deslizante
Para crear una navegación deslizante ejemplos son los siguientes:
Ejemplos
<- Div más externa :! Diseño de página ->
<Div class = "off-lona -wrap" datos offcanvas>
<- Elemento interno :! "barras de herramientas" de contenido (enlaces, iconos, descripción, etc.) ->
<Div class = "interior-wrap ">
<Clase Nav = "ficha-bar ">
<Clase Sección = "left-pequeño ">
<A clase = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Clase Sección = "tab- media barra de sección">
<Clase H1 = "title"> Off-lona Ejemplo </ h1>
</ Section>
</ Nav>
<! - Deslizante Menú ->
<Aparte class = "left-off -canvas-menú">
<! - Añadir enlaces u otras cosas aquí ->
<Ul class = "off-lona prueba -lista">
<Li> <label> título < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aparte>
<! - Contenido principal ->
<Clase Sección = "sección principal ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Cierre el menú ->
<A clase = "exit-off -canvas"> </ a>
</ Div> <! - End contenido interno ->
</ Div> <! - End deslizando el menú ->
<! - Inicialización Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
<Div class = "off-lona -wrap" datos offcanvas>
<- Elemento interno :! "barras de herramientas" de contenido (enlaces, iconos, descripción, etc.) ->
<Div class = "interior-wrap ">
<Clase Nav = "ficha-bar ">
<Clase Sección = "left-pequeño ">
<A clase = "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Clase Sección = "tab- media barra de sección">
<Clase H1 = "title"> Off-lona Ejemplo </ h1>
</ Section>
</ Nav>
<! - Deslizante Menú ->
<Aparte class = "left-off -canvas-menú">
<! - Añadir enlaces u otras cosas aquí ->
<Ul class = "off-lona prueba -lista">
<Li> <label> título < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Aparte>
<! - Contenido principal ->
<Clase Sección = "sección principal ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Cierre el menú ->
<A clase = "exit-off -canvas"> </ a>
</ Div> <! - End contenido interno ->
</ Div> <! - End deslizando el menú ->
<! - Inicialización Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »