Навигация типа «Хлебные крошки» (breadcrumb) с помощью jQuery

Навигация с помощью «хлебных крошек» – одна из самых удобных в современном мире веб 2.0. Сегодня я расскажу вам об одном из jQuery плагинов, призванных упростить реализацию такой навигационной строки.
Используя данный плагин вы получите навигационную строку в виде складной цепочки, что позволяет использовать глубоко вложенные и многословные имена страницы.
Разработчики приняли решение не ограничивать количество элементов в строке, и это привело к том, что данный плагин является дружественным к SEO, удобным, да и просто с ним приятно поиграться.
Демо вы можете посмотреть на странице автора.

Данный плагин кроссбраузерен, он совместим даже с IE 6 и все соответствует современным WWW стандартам.
Чтобы использовать плагин, достаточно вот такого минимального количества кода:

[-]
View Code Javascript
  1. jQuery(document).ready(function()
  2. {
  3.     jQuery(«#breadCrumb»).jBreadCrumb();
  4. })

Для использования данного плагина требуется также easing плагин jQuery (с его помощью вычисляется длина элементов в навигационной строке), однако если вы не желаете подключать его, то можно произвести вычисления средствами jQuery:

[-]
View Code Javascript
  1. jQuery(document).ready(function()
  2. {
  3.     jQuery(«#breadCrumb»).jBreadCrumb({easing:‘swing’});
  4. })

Также эту опцию можно включить глобально:

[-]
View Code Javascript
  1. jQuery.fn.jBreadCrumb.defaults.easing = ‘linear’;

Ну и теперь остается только добавить соответствующий html-код:

[-]
View Code HTML
  1. <div id=«breadCrumb» class=«breadCrumb module»>
  2.     <ul>
  3.         <li>
  4.             <a href=«#»>Главная</a>
  5.         </li>
  6.         <li>
  7.             <a href=«#»>Подглавная</a>
  8.         </li>
  9.         <li>
  10.             <a href=«#»>Под-под главная</a>
  11.         </li>
  12.         <li>
  13.             <a href=«#»>Еще уровнем ниже</a>
  14.         </li>
  15.         <li>
  16.             <a href=«#»>Ну и так далее</a>
  17.         </li>
  18.         <li>
  19.             Текущая страница
  20.         </li>
  21.     </ul>
  22. </div>

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *