Фонд Скользящая навигация (Off-Canvas)
Боковая панель навигации
Off-Canvas слайд-навигации в настоящее время постепенно становятся все более и более популярным (нажмите на кнопку меню на меню выдвигается слева) в мобильной странице:
Для создания скользящего навигации
Для создания раздвижную навигации примеров можно привести следующие:
примеров
<- Наружная DIV :! Макет страницы ->
<Div класс = "OFF холст -wrap" данных offcanvas>
<- Внутренний элемент :! "Панели инструментов" контента (иконки, ссылки, описание и т.д.) ->
<Div класс = "внутренняя намотка ">
<Nav класс = "закладка-бар ">
<Класс Section = "левый маленький ">
<A Класс = "left-off -canvas-toggle menu-icon" HREF = "#"> <SPAN> </ SPAN> </ а>
</ Section>
<Раздел класс = "средний tab - бар-секция">
<H1 класс = "Title"> Off-холст Пример </ h1>
</ Section>
</ Nav>
<! - Раздвижные Меню ->
<Кроме класс = "Брошено -canvas меню">
<! - Добавьте ссылки или другие вещи здесь ->
<Ul класс = "вне холста тест -list">
<Li> <метка> Заголовок < / метка> </ li>
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
...
</ UL>
</ Помимо>
<! - Основное содержание ->
<Раздел класс = "основного раздела ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Закрыть меню ->
<A Класс = "exit-off -canvas"> </ а>
</ Div> <! - End внутреннее содержание ->
</ Div> <! - End раздвижными меню ->
<! - Initialization Фонд JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
<Div класс = "OFF холст -wrap" данных offcanvas>
<- Внутренний элемент :! "Панели инструментов" контента (иконки, ссылки, описание и т.д.) ->
<Div класс = "внутренняя намотка ">
<Nav класс = "закладка-бар ">
<Класс Section = "левый маленький ">
<A Класс = "left-off -canvas-toggle menu-icon" HREF = "#"> <SPAN> </ SPAN> </ а>
</ Section>
<Раздел класс = "средний tab - бар-секция">
<H1 класс = "Title"> Off-холст Пример </ h1>
</ Section>
</ Nav>
<! - Раздвижные Меню ->
<Кроме класс = "Брошено -canvas меню">
<! - Добавьте ссылки или другие вещи здесь ->
<Ul класс = "вне холста тест -list">
<Li> <метка> Заголовок < / метка> </ li>
<Li> <a HREF = "#"> Ссылка 1 </ A> </ li>
<Li> <a HREF = "#"> Ссылка 2 </ A> </ li>
...
</ UL>
</ Помимо>
<! - Основное содержание ->
<Раздел класс = "основного раздела ">
<H3> Lorem Ipsum </ h3 >
<P> .... </ p>
</ Section>
<! - Закрыть меню ->
<A Класс = "exit-off -canvas"> </ а>
</ Div> <! - End внутреннее содержание ->
</ Div> <! - End раздвижными меню ->
<! - Initialization Фонд JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »