[Статья] Меняем оформление "Хлебных крошек"

01-23-2013, 03:21 AM

Вот решил написать такую статью. В этой статье я попытаюсь максимально подробно объяснить как заменить стандартные булковские крошки на - «Хлебные крошки» на jQuery — плагин jBreadCrumbs.

Пример роботы - ТЫЦ

Как выглядит на булке:

До:

После:

И так в шаблон header или headinclude вставляем:

Code:

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

Идем в шаблон navbar ищем:

Code:

<if condition="is_array($navbits)">
			<table cellpadding="0" cellspacing="0" border="0">
			<tr valign="bottom">
				<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
				<td>&nbsp;</td>
				<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
			</tr>
			<tr>
				<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td>
			</tr>
			</table>
		<else />
			<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
		</if>

Меняем на:

Code:

<if condition="is_array($navbits)">
			<div class="breadCrumbHolder module">
	    <div id="breadCrumb0" class="breadCrumb module">
		<div style="overflow:hidden; position:relative;"><div><ul>       
			<li class="first"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></li>$navbits[breadcrumb]
				<a href="$navbar_reloadurl"></a><li class="last"><strong>$navbits[lastelement]</strong></li>
<else />
			<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
		</ul></div></div>
	    </div>
	</div>

		</if>

Ищем шаблон navbar_link, меняем содержимое на:

Code:

<if condition="$show['breadcrumb']">
	<li> <a href="$nav_url">$nav_title</a></li>
<else />
	$nav_title
</if>

В Дополнительные определения CSS вставляем:

Code:

.breadCrumb {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
	height: 21px;
	overflow: hidden;
	width: 990px;
	padding:5px;
}

.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/misc/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/misc/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/misc/ChevronOverlay.png) no-repeat 100% 0;
	width: 13px;
	height: 20px;
}

Вот и все. Не забываем загрузить файлы. Источник плагина

01-23-2013, 03:36 AM

По мне так когда подключаешь много всяких js мможно беду накликать. Так как уже сталкивался с этим. Можно гораздо проще сделать при помощи только Css3 Вот пример:
http://ruseller.com/lessons/les1365/demo/index.html
Но за старания спасибо )

01-23-2013, 03:40 AM

Quote:

Originally Posted by artscripts

По мне так когда подключаешь много всяких js мможно беду накликать.

В прочем это тоже можно без js, не заливать на форум файлы с папки clientscript и не подключать плагины в шаблонах, получится также как на скрине просто без анимации.

01-23-2013, 03:52 AM

artscripts, Штука класная, но даже в мой монитор не влезет(((
В два бы уровня... :(

StenLi добавил 23.01.2013 в 01:47
Вы все не поверите: Сейчас, сижу за пк, гуглю как сделать хлебные крошки в навбар. Сзади подходит моя девушка, смотрит на вбитый в гугл запрос и молча уходит на кухню..

Оффтоп

StenLi добавил 23.01.2013 в 01:52
С этими хлебными крошками вообще беда.
Сейчас попытался найти их в стиле фейсбук, так яша меня удивил.

01-23-2013, 04:00 AM

Quote:

Originally Posted by StenLi

Штука класная, но даже в мой монитор не влезет(((

Так там же просто пример, конечно все можно уменьшить как тебе надо.
Вот тут все подробно, а в 2 или 3 уровня как сделать лучше у Sven спросить, он у нас в таких делах мастер

01-23-2013, 03:58 PM

Много скриптов. Всё это даже с анимацией можно реализовать исключительно силами css.

01-23-2013, 04:06 PM

Quote:

Originally Posted by Nevil

Всё это даже с анимацией можно реализовать исключительно силами css.

Конечно можно, но работать будет не так плавно, и не кроссбраузерно, IE отпадает.

01-23-2013, 05:11 PM

9|10 ИЕ понимают CSS3...частично

04-11-2013, 11:28 AM

Не знаю как у других, кто ставил сия навигацию, но у меня возникли проблемы с отображением префиксов. И были до тех пор, пока в:

PHP Code:


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

Не удалил "display: block;".

05-27-2013, 03:14 PM

ещё одну проблему обнаружил, при длинном названии темы, дизайн рвётся вклочья