Фонд Magellan (Magellan) система навигации
Как создать навигацию Magellan
Компания Magellan Navigation является индексом навигации создается следующим образом:
примеров
<Dl класс = "суб-нав ">
<Dd данных Magellan поступление = "стр.1"> <a HREF = "# page1"> Page 1 </ а> </ дд>
<Dd данных Magellan поступление = "страница2"> <a HREF = "# page2"> Page 2 </ а> </ дд>
</ DL>
</ Div>
<H3 данных Магеллан-назначения = "стр.1"> page1 </ h3>
имя <A = "page1"> </ а>
...
<H3 данных Магеллан-назначения = "страница2"> PAGE2 </ h3>
имя <A = "page2"> </ а>
...
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Примеры аналитических
На элементе <div> для добавления data-magellan-expedition="fixed" " свойство для создания Magellan Navigation.
Тогда <dd> или <li> Добавьте data-magellan-arrival=" value " " атрибута, и добавить обратную ссылку в качестве значения атрибута (стр.1).
Использование data-magellan-destination="value" " атрибута для управления навигационной цели Magellan, за которым следуют <a> элементы добавить name=" value " атрибута. Два значение свойства должно быть data-magellan-arrival последовательные значения (стр.1).
И, наконец, инициализация Фонд JS, пользователь навигации при прокрутке страницы будут автоматически переключаться в зависимости от содержания в настоящее время отображается.
Глава Magellan Navigation Toolbar
Глава Magellan Navigation панель инструментов с помощью примеров:
примеров
<Nav класс = "сверху-бар " данных topbar>
...
<Раздел класс = "сверху-бар -сечением">
<Ul класс = "левый">
<Li данных Magellan поступление = "стр.1"> <a HREF = "# page1"> Page 1 </ а> </ li>
<Li данных Magellan поступление = "страница2"> <a HREF = "# page2"> Page 2 </ а> </ li>
</ UL>
</ Section>
</ Nav>
</ Div>
<H3 данных Магеллан-назначения = "стр.1"> page1 </ h3>
имя <A = "page1"> </ а>
...
<H3 данных Магеллан-назначения = "страница2"> PAGE2 </ h3>
имя <A = "page2"> </ а>
...
Попробуйте »
Magellan Navigation Перетяжка
По умолчанию Magellan навигации <div> элемент имеет отступы 10px. CSS можно использовать, чтобы удалить его:
примеров
обивка: 0;
}
Попробуйте »
Варианты навигации Magellan
Использование данных-параметры изменить атрибуты настроек навигации Magellan, такие как <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| имя | тип | дефолт | описание | примеров |
|---|---|---|---|---|
| active_class | строка | активный | Класс определяет ссылку активации | пробовать |
| порог | номер | 0 | Укажите, в какое время навигации требуется фиксированное положение. Будет рассчитываться в соответствии с полосой прокрутки, по умолчанию равно 0 (авто). | пробовать |
| destination_threshold | номер | 20 | Установленное значение устанавливается для отображения значения навигационных ссылок, чтобы перейти от верхней части списка активен (синий фон) когда. | пробовать |
| fixed_top | номер | 0 | Задает значения пикселов из головы навигационной панели | пробовать |