Фонд верхней панели навигации
Верхняя панель навигации по голове страницы:
примеров
<Ul класс = "название-область ">
<Li класс = "имя">
<! - Если вам не нужен заголовок или значок , чтобы удалить его ->
<H1> <a HREF = "#"> WebSiteName </ а> </ h1>
</ Li>
<- Кнопка Fold на маленьком экране :! Удалить тип .menu-значок, вы можете удалить значок.
Если вам нужно отобразить только изображения, вы можете удалить "Меню" Текст ->
<Li класс = "переключения-topbar меню-значок"> <a HREF = "#"> <SPAN> Меню </ SPAN> </ а> </ li>
</ UL>
<Раздел класс = "сверху-бар -сечением">
<Ul класс = "левый">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> Page 1 </ а> </ li>
<Li> <a HREF = "#"> Page 2 </ а> </ li>
<Li> <a HREF = "#"> Page 3 </ а> </ li>
</ UL>
</ Section>
</ Nav>
<! - Initialization Фонд JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Примеры аналитических
Используйте <nav class="top-bar" data-topbar> " данных topbar> Создание стандартной панели инструментов. .title-area класса определяет область сайта логотип (необходимо предотвратить li.name внутри). После того, как меньшего размера экрана вы можете увидеть кнопку "Menu". Создание меню в зависимости от размера экрана автоматически продленным складной напиток:
На малом экране, из-за размера многих из опций будут скрыты. li.toggle-topbar menu.icon класс создает кнопку меню, нажмите на нее , чтобы показать скрытые опции.
? Подсказка: Возврат в исходное окно браузера , чтобы увидеть эффект.
.top-bar-section определяет раздел навигации ссылки. .left класс указывает ссылка выравнивание по левому краю. .active класс используется для отображения выбранных элементов, синий фон.
Совет: Если вы хотите , чтобы право отцентрировать навигационные ссылки могут быть .left изменить .right :
Вы также можете установить выравнивание по левому краю выравнивается с правом:
примеров
<Ul класс = "левый">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> Page 1 </ а> </ li>
<Li> <a HREF = "#"> Page 2 </ а> </ li>
</ UL>
<Ul класс = "вправо">
<Li> <a HREF = "#"> Регистрация </ A> </ li>
<Li> <a HREF = "#"> Вход </ A> </ li>
</ UL>
</ Section>
Попробуйте »
Панель навигации по .divider добавить класс разделительные линии (вертикальные линии на большом экране, маленький экран является горизонтальная линия):
примеров
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a HREF = "#"> Page 1 </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a HREF = "#"> Page 2 </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a HREF = "#"> Page 3 </ а> </ li>
<Li класс = "разделитель"> </ li>
</ UL>
Попробуйте »
Выпадающее меню панель навигации
Вы можете установить навигационную панель в верхней части выпадающего меню.
К <li> элемент добавляется .has-dropdown класс для установки в раскрывающемся меню:
примеров
<Ul класс = "левый">
<Li класс = "активный"> <a HREF = "#"> Главная </ а> </ li>
<Li класс = "имеет-выпадающий ">
<A HREF = "#"> Дропдаун </ а>
<Ul класс = "раскрывающимся">
<Li> <a HREF = "#"> Первая ссылка в раскрывающемся списке </ а> </ li>
<Li> <a HREF = "#"> Второе звено в раскрывающемся списке </ а> </ li>
<Li класс = "активный"> <a HREF = "#"> Активная ссылка в раскрывающемся списке </ а> </ li>
</ UL>
</ Li>
</ UL>
</ Section>
Попробуйте »
Разделительная линия
Используйте .divider класс для установки раскрывающемся меню разделительная линия:
примеров
<Li> <a HREF = "#"> компании Apple </ а> </ li>
<Li> <a HREF = "#"> Banana </ а> </ li>
<Li> <a HREF = "#"> Orange </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <a HREF = "#"> Kale </ а> </ li>
<Li> <a HREF = "#"> Шпинат </ а> </ li>
</ UL>
Выпадающий ярлык меню
В <li> внутри оных <label> элемента , чтобы установить метку (название) в раскрывающемся меню:
примеров
<Li> <метка> Фрукты < / метка> </ li>
<Li> <a HREF = "#"> компании Apple </ а> </ li>
<Li> <a HREF = "#"> Banana </ а> </ li>
<Li> <a HREF = "#"> Orange </ а> </ li>
<Li класс = "разделитель"> </ li>
<Li> <метка> Овощной < / метка> </ li>
<Li> <a HREF = "#"> Kale </ а> </ li>
<Li> <a HREF = "#"> Шпинат </ а> </ li>
</ UL>
Встроенный в раскрывающемся меню
Выпадающее меню может быть встроен в раскрывающемся меню:
примеров
<Ul класс = "левый">
<Li класс = "имеет-выпадающий ">
<A HREF = "#"> Дропдаун </ а>
<Ul класс = "раскрывающимся">
<Li> <метка> Уровень 1 </ метка> </ li>
<Li> <a HREF = "#"> Ссылка </ A> </ li>
<Li> <a HREF = "#"> Ссылка </ A> </ li>
<Li класс = "имеет-выпадающий ">
<A HREF = "#"> Новый выпадающий </ а>
<Ul класс = "раскрывающимся">
<Li> <метка> Уровень 2 </ метка> </ li>
<Li> <a HREF = "#"> 2 - й уровень выпадающий </ а> </ li>
<Li> <a HREF = "#"> 2 - й уровень выпадающий </ а> </ li>
<Li класс = "имеет-выпадающий ">
<A HREF = "#"> Новый выпадающий </ а>
<Ul класс = "раскрывающимся">
<Li> <метка> Уровень 3 </ метка> </ li>
<Li> <a HREF = "#"> 3 - й уровень выпадающий </ а> </ li>
<Li> <a HREF = "#"> 3 - й уровень выпадающий </ а> </ li>
</ UL>
</ Li>
</ UL>
</ Li>
</ UL>
</ Li>
</ UL>
</ Section>
Попробуйте »
Clickable
По умолчанию, в раскрывающемся меню в панели навигации , чтобы переместить курсор на экране, мы можем использовать data-options="is_hover: false" " атрибут , чтобы установить панель навигации отображается на расстоянии одного щелчка мыши:
Кнопки и значки на панели навигации
Вы можете разместить значки на панели навигации и кнопки:
Вы можете поместить иконку в панели навигации, вы можете просматривать больше фотографий Style Foundation Icon Учебник :
примеров
<! - Фонд икона стиля ->
<Link отн = "таблица стилей" HREF = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Ul класс = "левый">
<Li класс = "активный"> <a HREF = "#"> <I класс = "фи-дом"> </ I> Главная </ а> </ li>
<Li> <a HREF = "#"> <I класс =" фи-торс "> </ I> Регистрация </ A> </ li>
<Li> <a HREF = "#"> <I класс =" фи-увеличительного стекла "> </ I> Поиск </ а> </ li>
</ UL>
Попробуйте »
Исправлена навигация
Панель навигации может быть закреплен в верхней части страницы.
Прокрутка страницы навигационной панели в верхней части не движется.
Чтобы исправить панель навигации просто навигационной панели на <div class="fixed"> внутри , чтобы:
примеров
<Nav класс = "сверху-бар " данных topbar>
...
</ Nav>
</ Div>
Попробуйте »
Панель навигации абсолютное позиционирование
Мы можем положить панель навигации <div class="sticky"> в панели навигации , чтобы установить абсолютное позиционирование, когда полоса прокрутки , чтобы свернуть в область, панели навигации , как фиксированной , как панели навигации в верхней части не двигается:
примеров
<Nav класс = "сверху-бар " данных topbar>
...
</ Nav>
</ Div>
Попробуйте »
При использовании .sticky класс, верхняя панель навигации фиксированной и будет во всех размеров экрана. Если вам необходимо указать параметры на экране только в <nav> Предыдущая data-options="sticky_on: small|medium|large" | Средний Большой" недвижимость:
примеров
<! - Только на большом экране ->
<Nav класс = "сверху-бар " данных topbar данных опции-= "sticky_on: большой">
..
</ Nav>
</ Div>
Или массивом из множества размеров экрана:
примеров
<! - Маленький экран и большой экран (не посередине экрана) ->
<Nav класс = "сверху-бар " данных topbar данных опции-= "sticky_on: [маленький, большой]">
..
</ Nav>
</ Div>