Несколько выпадающих меню в sidebar Есть решение

Добрый день. Возникла потребность сделать несколько выпадающих меню.

Тема дизайна Дизайн со вкусом PRO

Залез в sidebar/nav.html, путем дублирования кода смог получить второе меню, но т.к. оно идентичное, естественно начал его править. Как только я начинаю убирать циклы foreach из кода меню оно перестает работать либо вообще пропадает.

Не понимаю, как сохранить тему оформления и саму функцию выпадающего меню, но прописать туда просто статичные ссылки, которые будут вести на определенные страницы с уже настроенной фильтрацией товаров? И при этом еще сделать оба меню независимыми друг от друга, потому что сейчас при попытке свернуть нижнее меню сворачивается верхнее, а нижнее так и остается развернутым.

Пробовал менять переменные на новые, но тогда меню вообще перестает отображаться.

Заранее благодарю.

1 ответ

  • 1
    replicant 21 сентября 2018 16:47 # Решение

    Вы можете сделать простое выпадающее меню даже не копируя части кода с привязкой к скриптам темы дизайна, а создать свое меню.

    Вот скрипт (его вставляете в шаблон темы)

    <script type="text/javascript">$(".open").click(function () {$(this).siblings(".menu").slideToggle(350);});</script>
    350мс - это время появления, а при желании можно добавить ещё разные эффекты.

    Затем создаете два объекта классов open и menu

    <div class="open><a>Заголовок меню</a></div>
    <div class="menu">
    1. Первый пункт<br>
    2. Второй пункт<br>
    3. Третий пункт<br>
    ...
    </div>

    Есс-но всё красиво оформляете стилями в css, чтобы смотрелось как родное, а пункты делаете хоть элементами списка, хоть строками, хоть блоками... да и вообще как угодно.

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

    • +1
      Алексей Бухтеев Алексей Бухтеев 21 сентября 2018 18:40 #

      Спасибо за совет, но такой код не принимает, сразу же дико начинает ругаться на синтаксис и страница перестает грузиться вообще.

      Да и в целом зачем изобретать велосипед, подгонять стили в css, которые еще надо выискивать, потому что родной css прописан в строку и без комментариев, когда есть готовый блок с готовым стилем, нужно просто понять как создать аналогичный.. просто не понимаю откуда именно он берет дизайн и как формируется внутренняя составляющая данного модуля.

      • +2
        replicant replicant 21 сентября 2018 22:05 #

        Код не принимает, потому что надо использовать обрамляющую конструкцию, когда делаются вставки в шаблон.

        {literal}...а вот тут ставится java скрипт из примера...{/literal}

        Это нормальная практика.

        Сам код можно вставить в headJs (только тут уже без literal), который размещается в Сайт-Настройки или прицепить к внешнему файлу js вашей темы.

        Когда CSS прописан в строку и без комментариев, то пора расчехлять браузерные инструменты разработчика и инспектора кода и в реальном режиме все стили будут красивыми и все их параметры будут читаться (как на скриншоте), а вам останется только прицепить нужные стили к элементам вашего нового меню. Там дел на 10-15 минут навести красоту даже при сжатом в строку css.

        Если хотите начать быстро разбираться в html+css, то без этого инструментария никуда. Раз-два и всё понятно откуда ноги растут и какие стили куда накладываются. Очень просто и наглядно.


        P.S. Ни в коем случае не настаиваю. Разбираться в чужом коде тоже очень полезно, но с удобными инструментами дело-то быстрее пойдет. В вашем случае скорее всего ещё и JS файлы темы дизайна (демо тему смотреть как-то лениво было) с этим меню связаны, поэтому и сворачивается не тот блок, который вы хотите, чтобы свернулся.

        • +1
          Алексей Бухтеев Алексей Бухтеев 25 сентября 2018 20:12 #

          Большое спасибо, Ваш ответ очень помог)


          Остался один малююююсенький нюанс, который я не понимаю чем именно регулируется - это свернуто или развернуто меню по дефолту. Хотелось бы, чтобы меню по дефолту было свернутым и по желанию его можно было бы развернуть. Может Вы, добрый человек, знаете где этот подвох таится? Понимаю, что он прописан в css, но где именно не смог найти.

          Чтобы тут лишний спам не разводить, можем перейти на почту buhalex@narod.ru


          Заранее благодарю.

          • +1
            Алексей Бухтеев Алексей Бухтеев 28 сентября 2018 19:56 #

            <ul class="list-group collapse in" id="sidebarNav">

            Разобрался, если в этой строчке убрать IN то по дефолту меню будет в свернутом виде.

    • +1
      Алексей Бухтеев Алексей Бухтеев 19 октября 2018 14:47 #

      Попользовался тем меню и понял, что не самая рабочая тема для больших объемов информации.

      Теперь стоит более интересная зада, с которой, увы, снова не могу справиться сам.

      Есть у меня две категории верхнего уровня. Одна с ID 180, другая с ID 242.

      Соответственно 180я отвечает за вывод товаров по Брендам, а 242я несет в себе динамические категории, которые автоматом собирают в себя товары по тегам, то есть это меню По направлениям.

      Соответственно возникла задача затолкать в уже сформированный контейнер меню, аналогичное имеющемуся, чтобы оно работало с переменными $categories.

      Сейчас в index.html стоит правило отсечения родительской категории и вывод только подкатегорий

      <div class="wrapper">
              {if $wa->shop}
                  {$selected_category = $category.id|default:null}
                  {$categories = $wa->shop->categories($theme_settings.category|default:180, null, true, true)}
                  
              {/if}

      Соответственно прописал второе правило для второго меню

                  <div class="wrapper1">
              {if $wa->shop}
                  {$selected_category = $category1.id|default:null}
                  {$categories1 = $wa->shop->categories($theme_settings.category|default:242, null, true, true)}
                  
              {/if}

      Теперь стоит задача это самое меню вывести. Попробовал задублировать текст кода из sidebar/nav.html соответственно проиндексировав все дублирующие переменные индексом 1, чтобы не было конфликтов, но либо просто пропадает контейнер второго меню, либо ругается и выводит ошибки..

      Знаю, что пишу костыли, но очень прошу помощи и пояснений, как повторно обратиться к переменной категорий и вывести второе меню подкатегорий из другой родительской категории прямо в одном поселении.

      Заранее благодарю.

      Ниже мой корявый дублирующий код меню из sidebar/nav.html

      {if $wa->shop}
      {literal}
          {function name="catalog_side_subitem1" item=[] depth=3 level=0}
              {if count($item1.childs) && $item1.depth < $depth1}
                  {if $item1.depth > $level1}
                      {$class1 = "dropdown-submenu"}
                  {else}
                      {$class1 = "dropdown"}
                  {/if}
                  <li class="{$class1}{if $selected_category1 == $item1.id} active{/if}">
                      {if isset($item1.params.badge) && isset($item1.params.badgeclass) && $item1.depth>0}
                          <span class="badge {$item1.params.badgeclass} sbNav__badge">{$item1.params.badge}</span>
                      {/if}
                      <a href="{$item1.url}" data-icon-id="{$item1.id}">{$item1.name}</a>
                      <ul class="dropdown-menu">
                          {foreach $item1.childs as $ic1}
                              {catalog_side_subitem item=$ic1 level=$level1}
                          {/foreach}
                      </ul>
                  </li>
              {else}
                  <li{if $selected_category1 == $item1.id} class="active"{/if}>
                      {if isset($item1.params.badge) && isset($item1.params.badgeclass) && $item1.depth>0}
                          <span class="badge {$item1.params.badgeclass} sbNav__badge">{$item1.params.badge}</span>
                      {/if}
                      <a href="{$item1.url}" data-icon-id="{$item1.id}">{$item1.name}</a>
                  </li>
              {/if}
          {/function}
      
          {function name="catalog_side_item1" item=[] depth=2 level=0}
              {if count($item1.childs) && $item1.depth < $depth1}
                  <li class="list-group-item list-toggle sbNav__li sbNav__hover{if $selected_category1 == $item1.id} active{/if}">
                      {if isset($item1.params.badge) && isset($item1.params.badgeclass) && $item1.depth>0}
                          <span class="badge {$item1.params.badgeclass} sbNav__badge">{$item1.params.badge}</span>
                      {/if}
                      <a href="{$item1.url}" class="sbNav__link" data-icon-id="{$item1.id}">{$item1.name}</a>
                      <ul class="dropdown-menu">
                          {foreach $item1.childs as $ic1}
                              {catalog_side_subitem item=$ic1 level=$level1}
                          {/foreach}
                      </ul>
                  </li>
              {else}
                  <li class="list-group-item list-toggle sbNav__li{if $selected_category1 == $item1.id} active{/if}">
                      {if isset($item1.params.badge) && isset($item1.params.badgeclass) && $item1.depth>0}
                          <span class="badge {$item1.params.badgeclass} sbNav__badge">{$item1.params.badge}</span>
                      {/if}
                      <a href="{$item1.url}" data-icon-id="{$item1.id}" class="sbNav__link">{$item1.name}</a>
                  </li>
              {/if}
          {/function}
      {/literal}
          <div class="sbNav1 sidebar__block mb-401">
              {if count($categories1) > 0}
                  <a class="sbNav__header" href="#sidebarNav6" data-toggle="collapse">[`Бренды`]</a>
                  <ul class="list-group collapse in" id="sidebarNav6">
                      {foreach $categories1 as $item1}
                          {catalog_side_item item=$item1 level=$item1.depth}
                      {/foreach}
                  </ul>
              {/if}
          </div>
      {/if}

      конструкции {literal} присутствуют т.к. встраиваю через блок, а не напрямую в код sidebar/nav.html

Добавить ответ

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