Fundação de navegação deslizante (Off-Canvas)
navegação da barra lateral
Off-Canvas de navegação de slides agora tornam-se gradualmente mais e mais popular (clique sobre o botão de menu no menu desliza para fora a partir da esquerda) em uma página móvel:
Para criar uma navegação deslizante
Para criar uma navegação deslizante exemplos são os seguintes:
Exemplos
<- Div Outermost :! Page Layout ->
<Div class = "off-canvas -Wrap" data-offcanvas>
<- Elemento interno :! "Barras de ferramentas" de conteúdo (ícones, links, descrição, etc.) ->
<Div class = "interior-wrap ">
<Class Nav = "tab-bar ">
<Class Seção = "left-small ">
class = <A "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Seção = "middle tabulações bar-section">
<H1 class = "title"> Off-canvas Exemplo </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<Além class = "left-off -canvas-menu">
<! - Adicione links ou outras coisas aqui ->
<Ul class = "off-canvas teste -list">
<Li> <label> Título < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Além>
<! - O conteúdo principal ->
<Class Seção = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Feche o menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - End conteúdo interno ->
</ Div> <! - De menu deslizante End ->
<! - Inicialização Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
<Div class = "off-canvas -Wrap" data-offcanvas>
<- Elemento interno :! "Barras de ferramentas" de conteúdo (ícones, links, descrição, etc.) ->
<Div class = "interior-wrap ">
<Class Nav = "tab-bar ">
<Class Seção = "left-small ">
class = <A "left-off -canvas-toggle menu-icon" href = "#"> <span> </ span> </ a>
</ Section>
<Class Seção = "middle tabulações bar-section">
<H1 class = "title"> Off-canvas Exemplo </ h1>
</ Section>
</ Nav>
<! - Sliding Menu ->
<Além class = "left-off -canvas-menu">
<! - Adicione links ou outras coisas aqui ->
<Ul class = "off-canvas teste -list">
<Li> <label> Título < / label> </ li>
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
...
</ Ul>
</ Além>
<! - O conteúdo principal ->
<Class Seção = "main-section ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Feche o menu ->
class = <A "exit-off -canvas"> </ a>
</ Div> <! - End conteúdo interno ->
</ Div> <! - De menu deslizante End ->
<! - Inicialização Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »