Войти
  1. ВКонтакте
  2. Facebook
  1. » » » » Раскрывающееся меню категорий
Новые публикации Скрыть панель справаПоказать панель справа

Раскрывающееся меню категорий

2017-05-28T20:53:26+00:00 2017-05-28T20:53:26+00:00
Активный участник
  1. Офлайн
  2. Администраторы
  3. 238 сообщений
  4. Репутация: 3
  5. Сообщение
  6. Личные данные
Полезность: 0 | сообщение № 1 отправлено 20: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) добавим правила для этого меню:
#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 и это позволит нам не скрывать подкатегории и выделить ту подкатегорию, в которой мы находимся:
Вот и все. 


------------------------------------------
Лицензия Okay Cms со скидкой. Разработка магазинов на Okay CMS/
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Последние темы

  1. Улучшения для OkayCMS
    Автор: administrator 09:42, 17.06.2019
  2. Плагин блог для Moguta CMS
    Автор: administrator 11:41, 17.12.2018
  3. OxyClassifieds
    Автор: administrator 12:30, 04.11.2018
  4. Корзина в okay cms
    Автор: administrator 08:41, 28.03.2018
  5. Шаблоны OkayCMS
    Автор: owning 05:13, 27.03.2018
  6. Monstra CMS :: скрипт без базы данных
    Автор: administrator 14:55, 20.02.2018

Изменения статуса

  1. профиль Присоединился к форуму =))) 15:03, 01.12.2015
  2. профиль На форуме 11:37, 26.10.2015

ЧАТ

Наши партнеры