Навигация типа «Хлебные крошки» (breadcrumb) с помощью jQuery
Навигация с помощью «хлебных крошек» – одна из самых удобных в современном мире веб 2.0. Сегодня я расскажу вам об одном из jQuery плагинов, призванных упростить реализацию такой навигационной строки.
Используя данный плагин вы получите навигационную строку в виде складной цепочки, что позволяет использовать глубоко вложенные и многословные имена страницы.
Разработчики приняли решение не ограничивать количество элементов в строке, и это привело к том, что данный плагин является дружественным к SEO, удобным, да и просто с ним приятно поиграться.
Демо вы можете посмотреть на странице автора.
Данный плагин кроссбраузерен, он совместим даже с IE 6 и все соответствует современным WWW стандартам.
Чтобы использовать плагин, достаточно вот такого минимального количества кода:
-
jQuery(document).ready(function()
-
{
-
jQuery(“#breadCrumb”).jBreadCrumb();
-
})
Для использования данного плагина требуется также easing плагин jQuery (с его помощью вычисляется длина элементов в навигационной строке), однако если вы не желаете подключать его, то можно произвести вычисления средствами jQuery:
-
jQuery(document).ready(function()
-
{
-
jQuery(“#breadCrumb”).jBreadCrumb({easing:‘swing’});
-
})
Также эту опцию можно включить глобально:
-
jQuery.fn.jBreadCrumb.defaults.easing = ‘linear’;
Ну и теперь остается только добавить соответствующий html-код:
-
<div id=“breadCrumb” class=“breadCrumb module”>
-
<ul>
-
<li>
-
<a href=“#”>Главная</a>
-
</li>
-
<li>
-
<a href=“#”>Подглавная</a>
-
</li>
-
<li>
-
<a href=“#”>Под-под главная</a>
-
</li>
-
<li>
-
<a href=“#”>Еще уровнем ниже</a>
-
</li>
-
<li>
-
<a href=“#”>Ну и так далее</a>
-
</li>
-
<li>
-
Текущая страница
-
</li>
-
</ul>
-
</div>
Похожие статьи
- jQuery и AJAX
- Cloud Zoom – увеличение частей изображения на jQuery
- Скользящие элементы на jQuery
- Сворачивание ячейки таблицы в одну строку
- AJAX отправка формы на jQuery
- Модальные диалоговые окна на jQuery
- Простой аккордеон с помощью jQuery и CSS
- Делаем красивое меню при помощи CSS-спрайтов и ненавязчивого jQuery
- Расширяем Redactor или как очистить мусор MSWord в HTML документах
Оставить ответ