В предыдущей статье “Навигация 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
, устанавливаем границу толщиной в 1px и фиксированную ширину 30px:

.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? Сама задача ведь выполнена!

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017