Матвей Земсков

Заметки веб-мастера

Понедельник, 10 марта 2014 17:27

Прикрепляем иконки к пунктам меню

Оцените материал
(3 голосов)

В этой заметке я расскажу, как можно «прикрепить» изображение к пунктам меню на сайте под управлением CMS «1С-Битрикс». На самом деле в том нет ничего сложного, но меню с иконками в некоторых случаях выглядит более интересно, чем без них.

Меню с иконками и без

Как обычно для демонстрации примеров из своих заметок я использую демо-версию Битрикса (в процессе установки выбираю вариант «для разработчиков»). В ней есть примеры меню (Типовые примеры → Меню). Файлы с иконками я разместил в папке /upload/menu_icons/. Итак, скопируем файл .top.menu.php из корневой папки сайта в папку /examples/menu/. Для того, чтобы увидеть разницу до и после добавления иконок, нужно открыть файл /examples/menu/index.php и скопировать код вызова компонента меню, вставив его один под другой. Таким образом на странице будет отображаться 2 одинаковых меню. В обоих вариантах нужно выбрать шаблон ‘.default’. Затем скопировать у одного из компонентов его шаблон – его и будем изменять для отображения «иконок». При копировании я назвал его ‘icons’. Теперь можно приступать к изменениям файла меню (/examples/menu/.top.menu.php) и шаблона компонента. В файле с меню нужно изменить массив дополнительных переменных, передаваемых в шаблон меню: добавляем в него элемент “ICON_FILE”. В нем будет храниться путь к файлу с «иконкой». Аналогичные действия проводим с массивом каждого пункта меню. Подробнее о массиве $aMenuLinks можно почитать в документации для разработчиков.

PHP

$aMenuLinks = Array(
	Array(
	    "Главная", 
   	    "/", 
  	   Array(), 
  	   Array("ICON_FILE" => "/upload/menu_icons/main.png"), 
	   "" 
	),
     //…
);

После этого открываем для изменения файл шаблона компонента (/bitrix/templates/books/components/bitrix/menu/icons/template.php). Если вывести на страницу с меню содержимое массива $arResut, то можно будет увидеть следующую картину.

фрагмент массива $arResult у компонента меню

На скриншоте с фрагментом массива $arResult можно увидеть, что в нем появился массив “PARAMS”, а в нем – наш элемент “ICON_FILE”.

Теперь можно смело делать изменения в шаблоне компонента меню. После изменений код шаблона будет выглядеть следующим образом.

PHP

	<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
	<?if (!empty($arResult)):?>
	<ul class="left-menu">
	<?
	foreach($arResult as $arItem):
		if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
			continue;
	?>
	<?if($arItem["SELECTED"]):?>
		<li>
		<?if(isset($arItem["PARAMS"]["ICON_FILE"])):?>
			<img src="/<?=$arItem["PARAMS"]["ICON_FILE"]?>" />
		<?endif?>
		<a href="/<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
	<?else:?>
		 <li>
		<?if(isset($arItem["PARAMS"]["ICON_FILE"])):?>
				 <img src="/<?=$arItem["PARAMS"]["ICON_FILE"]?>" />
		<?endif?>
		<a href="/<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
	<?endif?>	
	<?endforeach?>
	</ul>
	<?endif?>

Итак, задача решена: в шаблон добавлен вывод иконок!

Прочитано 6841 раз
Добавить комментарий

Комментарии   

 
0 # Bingam 04.03.2016 17:50
Здравствуйте. Cкажите, пожалуйста, как делать чтобы при не selected пункта меню картинка поменялась?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 12.03.2016 09:38
Здравствуйте! Можно добавить в массив еще один элемент, например, ICON_FILE_SELECTED. В шаблоне в зависимости от условий, показывать разные иконки.
Кстати, сейчас более актуально использовать иконочные шрифты вместо изображений (например, Font Awesome). При желании можно заменить показ картинок на иконки шрифта в пунктах меню
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Елена 27.07.2016 15:57
Добрый день! А как реализовать в меню выделение одного пункта цветом? То есть все пункты одним цветом, а один пункт - другим. Имеется в виду - не активный пункт, а именно с точки зрения выделения (привлечения внимания к этом пункту).

Заранее благодарю!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 07.08.2016 17:00
Елена, добрый день! Можно сделать аналогично как иконки. Добавить параметр, например, с именем ITEM_CSS_CLASS, а в шаблоне проводить проверку, если этот параметр у пункта меню существует, добавлять CSS-класс и стили к нему в .css-файл
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: