Kriuchko
12/14/2018 - 7:45 AM

*Menu* - custom multilevel menu

BigCommerce navigation menu

https://support.bigcommerce.com/s/article/Adding-Page-Links-to-Your-Category-Menu

templates/common/navigation-menu.html

<ul class="primary-menu">
  {{#each categories}}

      {{#if ../theme_settings.navigation_design '===' 'simple'}}
          {{> components/common/navigation-list}}
      {{/if}}

      {{#if ../theme_settings.navigation_design '===' 'alternate'}}
          {{> components/common/navigation-list-alternate}}
      {{/if}}

  {{/each}}

  {{#unless theme_settings.hide_content_navigation}}

      <ul class="primary-menu">
          {{#each pages as |parentpage|}}

              {{#if parentpage.name '!=' ../theme_settings.footer_menu}}
              
                  <li class="{{#if parentpage.children}}drop{{/if}}
                  {{#if parentpage.name '==' ../page.title}} active{{/if}}
                  {{#if parentpage.children}}{{#each parentpage.children as |child|}}{{#if child.name '==' ../../../page.title}} active{{/if}}{{/each}}{{/if}}">

                      <a {{#if parentpage.children}}class="drop-opener"{{/if}} href="{{parentpage.url}}">

                          {{#if parentpage.name '==' 'Blog'}}

                              {{lang 'header.press'}}

                          {{else}}

                              {{parentpage.name}}

                          {{/if}}
                          
                      </a>

                      {{#if parentpage.children}}

                          <div class="drop-menu">
                              <div class="drop-hold">

                                  <ul class="sub-menu">
                                      {{#each parentpage.children as |child|}}

                                          <li class="{{#if child.name '==' ../../../page.title }} active{{/if}}"><a href="{{child.url}}">{{child.name}}</a></li>

                                      {{/each}}
                                  </ul>

                                  <div class="columns mob-hidden">
                                      <div class="col">
                                          <div class="visual-drop"><img src="img-drop-01.jpg" alt="image description" width="222" height="221"></div>
                                      </div>
                                      <div class="col">
                                          <div class="visual-drop"><img src="img-drop-02.jpg" alt="image description" width="222" height="221"></div>
                                      </div>
                                  </div>

                              </div>
                          </div>

                      {{/if}}

                  </li>

              {{/if}}

          {{/each}}
      </ul>

  {{/unless}}
</ul>