• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3426 подписчиков
• наш твиттер
  426 фолловеров

«Хлебные крошки» на jQuery

3 июня 2009, 20:46 Павел Марковнин JavaScript рейтинг 7

Привет!

Знаете что называют «хлебными крошками»? Это вид вспомогательной навигации, которая показывает вложенность текущего документа. Она очень удобна, если на вашем сайте есть глубокая вложенность страниц. Но такой вид навигации встречается не только на сайтах, но и в операционных системах (на картинке слева изображена маковская версия).

Так вот, сегодня мы рассмотрим плагин BreadCrumbs для jQuery, которые позволит нам сделать эти крошки более компактными (в случае, когда у вас более 5 вложенных страниц с длинными заголовками это очень актуально). Думаю, что разработчики плагина взяли идею как раз из Мак ОСи.

Итак, начнем с верстки. Как и полагается нормальным парням, хлебные крошки мы сделаем через неупорядоченный список ссылок (красиво, валидно, семантично):

<div class="breadCrumbHolder module">
	<div id="breadCrumb" class="breadCrumb module">
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Примеры</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Плагины</a></li>
			<li><a href="#">Навигация</a></li>
			<li>«Хлебные крошки» на jQuery — плагин jBreadCrumbs</li>
		</ul>
	</div>
</div>
<div class="chevronOverlay main"></div>

Теперь сделаем стили:

.breadCrumb {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
	height: 21px;
	overflow: hidden;
	width: 990px;
	padding:5px;
	border:solid 1px #dedede;
	background:#fff;
}

.breadCrumb ul {
	margin: 0;
	padding: 0;
	height: 21px;
	display: block;
}

.breadCrumb ul li {
	display: block;
	float: left;
	position: relative;
	height: 21px;
	overflow: hidden;
	line-height: 21px;
	margin: 0px 6px 0px 0;
	padding: 0px 10px 0px 0;
	font-size: .9167em;
	background: url(../Images/Chevron.gif) no-repeat 100% 0;
}

.breadCrumb ul li div.chevronOverlay {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.breadCrumb ul li span {
	display: block;
	overflow: hidden;
}

.breadCrumb ul li a {
	display: block;
	position: relative;
	height: 21px;
	line-height: 21px;
	overflow: hidden;
	float: left;
}

.breadCrumb ul li.first a {
	height: 16px !important;
	text-indent: -1000em;
	width:16px;
	padding: 0;
	margin-top: 2px;
	overflow: hidden;
	background:url(../Images/IconHome.gif) no-repeat 0 0;
}

.breadCrumb ul li.first a:hover {
	background-position: 0 -16px;
}

.breadCrumb ul li.last {
	background: none;
	margin-right: 0;
	padding-right: 0;
}

.chevronOverlay {
	display: none;
	background: url(../Images/ChevronOverlay.png) no-repeat 100% 0;
	width: 13px;
	height: 20px;
}

Для работы плагина нам потребуется сам jQuery, плагин jQuery Easing и плагин jQuery Dimensions (они все есть в архиве примера в конце статьи). Подключаем их (внизу страницы) и вызываем плагин:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.jBreadCrumb.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
});

Вот и все собственно. Просто, быстро, а главное удобно! ;-)

Смотрим пример Загружаем

Как всегда, жду ваших советов, замечаний и вопросов в комментариях. Пока!

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•