COTONTI.CMSWORKS.RU
Сборка фриланс-биржи на cotonti

Простая инструкция для создания раскрывающегося меню категорий, если вы используете двухуровневую структуру категорий.

Итак, на старте мы имеем исходную сборку биржи (на момент написания урока версия 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; }

Если сейчас мы посмотрим на работу меню, то увидим, что подкатегории будут отображаться при переходе на родительскую категорию:

3

Но если мы перейдем на подкатегорию, то они скроются. Решением этой проблемы будет использование jQuery. Для этого мы в файле themes/bootlance/js/js.js после строки $().ready(function() { добавим следующую простую строчку кода:

$('#catsmenu>li>ul>li.active').parents('li').addClass('active');

Теперь, если мы перейдем на подкатегорию, наш скрипт добавит к родительскому элементу li класс .active и это позволит нам не скрывать подкатегории и выделить ту подкатегорию, в которой мы находимся:

4

Вот и все. 

Чтобы скачать исходники и видеть комментарии, пожалуйста, авторизуйтесь или зарегистрируйтесь на сайте.