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>
Получаем такой результат
Цитата
<!-- Прелоадер изображений которые появляются при наведеннии на ссылку в меню -->
<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>
<a class="newicon-act"></a>
</li>
</ul>
</div>
</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>
<a class="newicon-act"></a>
</li>
</ul>
</div>
</div>
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;}