Добавление/изменение Иконок Меню В Шаблоне Техника

Инструкция для добавления иконок меню в шаблоне Техника

1. Редактируем шаблон HTML
Находим код блока навигации

<!-- Блок навигации -->
		 {% IFNOT menu_empty %}
			 <ul class="span44 links">
			 {% FOR menu %}
				 {% FOR header %}
				 {% FOR links %}
					 <li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
					 <a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						 class="{% IF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					 </li>
			 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
			 </ul>
		 {% ENDIF %}
		 <div class="clear"></div>
		 <!-- Прелоадер изображений которые появляются при наведеннии на ссылку в меню -->
		 <div style="position:absolute;top:-9999px;">
			 <div class="header">
			 <ul class="links">
				 <li>
				 <a class="catalog-act"></a>
				 <a class="present-act"></a>
				 <a class="briefcase-act"></a>
				 <a class="key-act"></a>
				 <a class="tick-act"></a>
				 <a class="label-act"></a>
				 <a class="heart-act"></a>
				 <a class="clipboard-act"></a>
				 <a class="address-act"></a>
				 <a class="clock-act"></a>
				 <a class="cart-act"></a>
				 <a class="user-act"></a>
				 <a class="document-act"></a>
				 <a class="home-act"></a>
				 </li>
			 </ul>
			 </div>
		 </div>
		 <!-- /Блок навигации -->

В этот кусок мы должны добавить новые условия для отображения иконок для новых пунктов меню.

Вот часть кода которую надо добавить

{% ELSEIF menu.header.links.NAME=Новый Пункт Меню %}newicon

Этот кусок мы должны добавить в эту часть кода

 <li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
						<a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						 class="{% IF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ELSEIF menu.header.links.NAME=Новый Пункт Меню %}newicon{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					 </li>

Почти в самом конце, перед

{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}

У вас должен получиться такой результат

 <li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
					 <a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						 class="{% IF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ELSEIF menu.header.links.NAME=Новый Пункт Меню %}newicon[/b]{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					 </li>

Далее мы добавляем в эту часть

<!-- Прелоадер изображений которые появляются при наведеннии на ссылку в меню -->
		 <div style="position:absolute;top:-9999px;">
			 <div class="header">
			 <ul class="links">
				 <li>
				 <a class="catalog-act"></a>
				 <a class="present-act"></a>
				 <a class="briefcase-act"></a>
				 <a class="key-act"></a>
				 <a class="tick-act"></a>
				 <a class="label-act"></a>
				 <a class="heart-act"></a>
				 <a class="clipboard-act"></a>
				 <a class="address-act"></a>
				 <a class="clock-act"></a>
				 <a class="cart-act"></a>
				 <a class="user-act"></a>
				 <a class="document-act"></a>
				 <a class="home-act"></a>
				 </li>
			 </ul>
			 </div>
		 </div>

Эту строку добавляем перед </li>

<a class="newicon-act"></a>

Получаем такой результат

Цитата

2. Переходим к редактированию стиля
Редактируем файл main.css

Находим

.header .links li a.home{background:url("{ASSETS_IMAGES_PATH}menu_icon_home_16.png") left center no-repeat;}
.header .links li a.home-act{background:url("{ASSETS_IMAGES_PATH}menu_icon_home_16_act.png") left center no-repeat;}

Ниже этого добавляем

.header .links li a.newicon{background:url("{ASSETS_IMAGES_PATH}menu_icon_newicon_16.png") left center no-repeat;}
.header .links li a.newicon-act{background:url("{ASSETS_IMAGES_PATH}menu_icon_newicon_16_act.png") left center no-repeat;}

Загружаем две иконки с названием menu_icon_newicon_16.png и menu_icon_newicon_16_act.png

menu_icon_newicon_16.png обычный вид иконки
menu_icon_newicon_16_act.png  иконка при наведении мышки

Если вы хотите чтобы у вас при наведении и в обычном виде иконки были одинаковые, то вам необходимо в этом коде прописать одинаковое название.

.header .links li a.newicon{background:url("{ASSETS_IMAGES_PATH}menu_icon_newicon_16.png") left center no-repeat;}
.header .links li a.newicon-act{background:url("{ASSETS_IMAGES_PATH}menu_icon_newicon_16.png") left center no-repeat;}

Castiel (12 Январь 2014 - 02:52) писал:

Сделал все как вы написали, но не появляестя иконка около пункта меню.

SL-212710

Почему-то работаю только иконки уже предустановленные, т.е. tick, label, clipboard, cart  и т.д. а новые загруженные не приживаются...

Цитата

Сообщение отредактировал polosatoff: 29 Июнь 2014 - 00:18

polosatoff (28 Июнь 2014 - 21:23) писал:

Здравствуйте, уточните пожалуйста какую иконку вы добавляли (название) и для какова пункта меню.

Добрый день, я восароьзовался предустановленными иконками "портфель" и "листочек бумажки" =) Они оказались в тему, и я оставил как есть. А вобще я пытался сделать раздел "Гарантия" и под этот раздел сделал эконку.

Но сейчас для меня лично вопрос решен.  Я вышел из положения. Так что спасибо.