Делаем хлебные крошки под стиль Google

Итак, все вы наверняка видели привлекательный стиль оформления навигации "хлебные крошки" на сайтах Google. Сегодня приведу пример CSS-сниппета, выполняющего схожую задачку. Вот, как все будет выглядеть:

Хлебные крошки на сайт

Код валидный, разметка не расползается в бяку. Проверял внешний вид на Firefox 13.0, Chrome 19, Opera 11, Internet Explorer 8.

#google-breadcrumb {
	float: left;
	display: block;
	font-weight: bold;
}
#google-breadcrumb ul {
	font-family: Helvetica, sans-serif;
	list-style: none;
	display: inline;
}
.items {
	display: block;
}
.items li.first {
	padding-left: 8px;
}
.items li {
	float: left;
}
.items li a, .items li a:link, .items li a:visited {
	color: #616d7e;	
	font-size: 12px;
	text-decoration: none;
	display: block;
	margin-left: -13px;
	padding: 7px 17px 11px 25px;
	position: relative;	
}
.items li a {
	background: url("images/bg-crumbs.png") 100% 0% no-repeat;
}
.items li a:hover {
	color: #333333;
	cursor: pointer;
	background-position: 100% -48px;
}
.items li a:active {
	color: #333333;
	background-position: 100% -96px;
}
.items li:first-child a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 29px;
	border-left: 1px solid #d9d9d9;
}

Далее приведу типовую HTML-разметку для такого рода навигации:

<div id="google-breadcrumb"> 
	<ul class="items">
		<li><a href="http://example.com"><span></span>Домашняя</a></li>
		<li><a href="http://example.com/category-1">Рубрика 1</a></li>
		<li><a href="http://example.com/category-1/article-3">Статья 3</a></li>
	</ul>
</div>

Если внешний вид все-таки неожиданно рушиться, ловите перекрывающие стили вашей CSS-разметки с помощью дополенения к FF под звучным названием Firebug.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.