Меню категорий в блоке фильтров

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

apetruniv
apetruniv
Репутация: 4
Сообщения: 31
Зарегистрирован: 25.02.2019
С нами: 5 лет 1 месяц

Сообщение #1 apetruniv » 31.03.2019, 08:04

Код представляю таким как он у меня, работу не гарантирую, деланно мной не професионаломм
в файлі features.tpl

ищем

Код: Выделить всё

{if ($category->subcategories && $category->count_children_visible) ||
($category->path[$category->level_depth-2]->subcategories && $category->path[$category->level_depth-2]->count_children_visible)}
    <div class="catalog_nav filters tablet-hidden">
        <div class="h2 filter_name">
        <span data-language="features_catalog">{$lang->features_catalog}</span>
    </div>
        <div class="filters">
            {function name=categories_tree_sidebar}
                {if $categories}
                    <div class="level_{$level} {if $level == 1}catalog_menu {else}subcatalog {/if}">
                        {foreach $categories as $c}
                            {if $c->visible}
                                <div class="catalog_item has_child">
                                    <{if $c->id == $category->id}b{else}a{/if} class="catalog_link{if $c->subcategories} sub_cat{/if}{if $category->id == $c->id} selected{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">
                                        <span>{$c->name|escape}</span>
                                    </{if $c->id == $category->id}b{else}a{/if}>
                                </div>
                            {/if}
                        {/foreach}
                    </div>
                {/if}
            {/function}
            {if $category->subcategories && $category->count_children_visible}
                {categories_tree_sidebar categories=$category->subcategories level=1}
            {elseif $category->path[$category->level_depth-2]->subcategories && $category->path[$category->level_depth-2]->count_children_visible}
                {categories_tree_sidebar categories=$category->path[$category->level_depth-2]->subcategories level=1}
            {/if}
        </div>
    </div>
{/if}


заменяем на

Код: Выделить всё

{if !$brand->categories}
    <div class="catalog_nav filters tablet-hidden">
        <div class="h2 filter_name" style="background-color: #38c0f3; color: #fff">
        <span data-language="features_catalog">{$lang->features_catalog}</span>
        </div>
        <div class="slide">
            {function name=categories_tree1}
            {if $categories}
            <ul class="menu{if $level == 1}{else}__drop{/if}">
            {foreach $categories as $c}
                {* Показываем только видимые категории *}
                {if $c->visible}
                    {if $c->subcategories && $c->count_children_visible}
                    <li class="menu__list" >
                        <a class="{if $category->id == $c->id}selected{/if}{if $c->subcategories} sub_cat{/if}" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}">
                            <span>{$c->name|escape}</span>
                        </a>
                        <i class="fn_switch cat_switch1"></i>
                        {categories_tree1 categories=$c->subcategories level=$level+1}
                    </li>
                    {else}
                    <li class="menu__list {if $category->id == $c->id}selected{/if}">
                        <a class="{if $c->subcategories}sub_cat {/if}{if $category->id == $c->id}selected{/if}"" href="{$lang_link}catalog/{$c->url}" data-category="{$c->id}" id="menu__drop">
                            <span>{$c->name|escape}</span>
                        </a>
                    </li>
                    {/if}
                {/if}
            {/foreach}
            </ul>
            {/if}
            {/function}
            {categories_tree1 categories=$categories level=1}
        </div>
    </div>
{/if}


добавляем css

Код: Выделить всё

.slide{
  padding-bottom: 15px;
}
.slide ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.menu a{
  background: #fff;
  padding: 10px;
  display: block;
  border-bottom: 1px solid #e8e8e1;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
  padding-left: 23px;
    text-decoration: none;
}
.menu__list{
  position: relative;
}
.menu__list .selected{
  font-weight: bold;
}

.menu__drop{
  display: none;
  width: 100%;
  border-left: 10px solid transparent;
  -webkit-transition: 0.5s opacity;
  transition: 0.5s opacity;
  z-index: 999;
}
.menu__drop a{padding-left: 35px}
.menu__dropon {display: block;!important}
.cat_switch1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 31px;
}
.cat_switch1::after {
    content: "\271A";
    position: absolute;
    top: 11px;
    right: 15px;
    width: 16px;
    height: 8px;
   font-style: normal;
   font-size: 16px;
   cursor: pointer;
}


в файле в конце вставляем (открывает список если вы находитесь в подкатегории)

Код: Выделить всё

$('.selected').parent('ul').addClass('menu__dropon'); 
Вложения
Screenshot_9.png

Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 22 гостя