Drupal 8: темизация элементов меню

Drupal: 
Уровень сложности: 

Шаблоны Drupal 8 строятся на HTML5, что помогает решать задачи вёрстки дизайна точно и выгодно.

Теория: HTML5, в котором возможностей больше, чем в HTML4, предлагает использование пользовательских атрибутов тегов. При работе с документом HTML5 (шаблоном сайта) можно добавлять пользовательские атрибуты к любым тегам, например, тегу <a>, чтобы выделить нужный элемент и обращаться к нему в CSS и JavaScript по значению атрибута.
То есть теги могут иметь атрибуты data-*, также как и стандатные атрибуты href, src, border, alt, width...
Примеры HTML5:

  1. <a href="/" data-kuda="main">Главная</a>
  2. <a href="blog" data-kuda="blog">Блог</a>
  3. <img src="/images/logo.jpg" data-img-name="logo">
  4. <img src="/images/blog/environmebt.jpg" data-img-name="bog-teaser">

В этих примерах атрибуты data-* можно использовать для обращения к пунктам в CSS (или JS):

  1. a[data-kuda="main"] {color:#55FFAA;} /*выделить ссылку на главную страницу цветом*/
  2. img[data-img-name="blog-teaser"] {width:25%;} /*задать картинкам тизеров ширину*/

Подобные атрибуты прописаны в шаблонах Drupal 8.

 

CSS-стили ссылок меню с помощью атрибутов data-drupal-link-system-path

Пользовательский атрибут data-drupal-link-system-path позволяет обращаться к каждому элементу меню и задавать стили CSS.
Откройте FireBug страницы сайта на Друпал 8, чтобы узнать какие атрибуты и их значения присвоены элементам страницы.

drupal 8 темизация меню
Скриншот FireBug страницы сайта на Drupal 8 с шаблоном TheMy

Для обращения к ссылкам Главного меню будем использовать класс блока главного меню menu--main (8я сверху строка кода), класс списка ul menu и пользовательский атрибут ссылок data-drupal-link-system-path. Свойства элементов меню в данном случае будут прописываться таким CSS:

  1. .menu--main .menu li a[data-drupal-link-system-path="<front>"] {background:blue;} /*Кнопка Главная - с синим фоном*/
  2. .menu--main .menu li a[data-drupal-link-system-path="kontakty"] {background:orange;} /*Кнопка Контакты - оранжевая*/
  3. .menu--main .menu li a[data-drupal-link-system-path="blog"] {background:brown;} /*Кнопка Блог - коричневая*/

Если такие длинные атрибуты невыгодны для решения задач вёрстки, можно пользоваться модулем Menu Link Attributes, который добавляет стандартные атрибуты class, id ссылкам выбранных вами меню.

Больше информации о пользовательских атрибутах HTML5: Google: html5 атрибуты data-*