Простая инструкция для создания раскрывающегося меню категорий, если вы используете двухуровневую структуру категорий.
Итак, на старте мы имеем исходную сборку биржи (на момент написания урока версия 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) добавим правила для этого меню:

#catsmenu {}
#catsmenu li>ul { display: none; margin-left: 10px; }
#catsmenu li>ul>li { list-style: none; }
#catsmenu li.active>ul { display: block; }
#catsmenu li.active>ul { display: block; }
#catsmenu li.active>ul>li.active { font-weight: bold; }

Если сейчас мы посмотрим на работу меню, то увидим, что подкатегории будут отображаться при переходе на родительскую категорию:
Но если мы перейдем на подкатегорию, то они скроются. Решением этой проблемы будет использование jQuery. Для этого мы в файле themes/bootlance/js/js.js после строки $().ready(function() { добавим следующую простую строчку кода:
$('#catsmenu>li>ul>li.active').parents('li').addClass('active');
Теперь, если мы перейдем на подкатегорию, наш скрипт добавит к родительскому элементу li класс .active и это позволит нам не скрывать подкатегории и выделить ту подкатегорию, в которой мы находимся:
Вот и все.