Полезность: 0
|
сообщение № 1 отправлено 23:53, 28.05.2017
Простая инструкция для создания раскрывающегося меню категорий, если вы используете двухуровневую структуру категорий. Итак, на старте мы имеем исходную сборку биржи (на момент написания урока версия freelance 2.7.1_rc_7). И допустим мы хотим реализовать раскрытие меню категорий в модуле проектов (Projects). В стандартной реализации подкатегории будут выводиться так как показано на рисурнке:
За вывод категорий в проектах отвечает шаблон projects.tree.tpl. Скопируем его в нашу тему (themes/bootlance) и добавим свой идентификатор id="catsmenu":
<!-- BEGIN: MAIN -->
<ul<!-- IF {LEVEL} == 0 --> id="catsmenu" class="nav nav-list"<!-- ENDIF -->>
<!-- IF {LEVEL} == 0 -->
<li><a href="{HREF}">{PHP.L.All}</a></li>
<!-- ENDIF -->
<!-- BEGIN: CATS -->
<li<!-- IF {ROW_SELECTED} --> class="active"<!-- ENDIF -->><a href="{ROW_HREF}">{ROW_TITLE} ({ROW_COUNT})</a>
<!-- IF {ROW_SUBCAT} -->
{ROW_SUBCAT}
<!-- ENDIF -->
</li>
<!-- END: CATS -->
</ul>
<!-- END: MAIN -->
Теперь в css (themes/bootlance/css/style.css) добавим правила для этого меню:
Если сейчас мы посмотрим на работу меню, то увидим, что подкатегории будут отображаться при переходе на родительскую категорию: Но если мы перейдем на подкатегорию, то они скроются. Решением этой проблемы будет использование jQuery. Для этого мы в файле themes/bootlance/js/js.js после строки $().ready(function() { добавим следующую простую строчку кода: $('#catsmenu>li>ul>li.active').parents('li').addClass('active'); Теперь, если мы перейдем на подкатегорию, наш скрипт добавит к родительскому элементу li класс .active и это позволит нам не скрывать подкатегории и выделить ту подкатегорию, в которой мы находимся: Вот и все.
------------------------------------------ Лицензия Okay Cms со скидкой. Разработка магазинов на Okay CMS/