Навигация breadcrumbs на основе изображений

В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.

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

Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.

Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.

Это послужило поводом для меня написать статью для своего блога. Тот пример, которым я хочу поделиться с вами, является очень простым, при его создании применяется только один графический файл. Остальная часть навигации создается с помощью CSS-кода.

Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка

1

ul

Но сначала посмотрим на образец, с которым будем работать:

Меню достаточно простое, как и код, с помощью которого мы будем его создавать.

HTML код - маркированный список ul

<ul class="crumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Main section</a></li>
  <li><a href="#">Sub section</a></li>
  <li><a href="#">Sub sub section</a></li>
  <li>The page you are on right now</li>
</ul>

Все пункты меню имеют ссылки, кроме последнего - “The page you are on right now” (Страница, на которой вы сейчас находитесь). При работе над меню я задавался вопросом - является ли список наиболее подходящей структурой для создания меню? Я полагаю, что применение списка в этом случае не является строгим правилом, но мне кажется - это наиболее семантичный и правильный вариант.

CSS код - создаем стили для меню

Задаем общие стили для меню - убираем маркеры и обнуляем отступы в браузерах Firefox, IE:

ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Далее для меню задаем класс с именем

1

crumbs

.crumbs {
  border: 1px solid #dedede;
  height: 30px;
}

Все “крошки” должны располагаться горизонтально, в одну линию, поэтому элементы

1

li

1

float:left

1

line-height

1

30px

Помещаем слева каждого пункта небольшое пространство для отступа с помощью

1

padding-left: 10px

1

#777

.crumbs li {
  float: left;
  line-height: 30px;
  padding-left: 10px;
  color: #777;
}

Нам необходимо, чтобы вся область пункта меню была кликабельной, поэтому делаем ее блочным элементом

1

display:block

… которую “задвигаем” вправо (100%) и размещаем точно по вертикали (50%). Также делаем у ссылки отступ справа

1

padding-left: 15px

.crumbs li a {
  display: block;
  padding: 0 15px 0 0;
  background: url(img/crumbs.gif) 100% 50% no-repeat;
}

Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:

.crumbs li a:link, .crumbs li a:visited {
    text-decoration: none;
    color: #777;
  }

Придадим ссылкам небольшую анимацию с помощью псевдо-класса

1

:hover

1

:focus

.crumbs li a:hover, .crumbs li a:focus {
    color: #dd2c0d;
  }

Результат нашей работы представлен здесь:

Примечание переводчика:

Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!

На этом все.