1

I have a Craft project set up locally, and I have installed a plugin for menus. I have set up the menu with the plugin in the administration, and I have managed to output the menu in the template by using this:

{{ craft.olivemenus.getMenuHTML('topBar')}}

But, I would like to use my own HTML, and only use the links from the created plugin. This is the template that I would like to use:

  <div class="top-bar">
    <div class="row">
      <div class="column">
        <div class="top-bar-title">
          <a href="/">
              <span class="first">Forandrings</span><span class="second">fabrikken</span>
          </a>
        </div>
        <div>
          <div class="top-bar-left">
            <ul class="dropdown menu js-topbar-menu">
              <li>
                <!--
                <a href="#" class="dropdown-menu-link"><i class="ion-android-menu"></i> <span>Meny</span></a>
                -->
                <a href="#" class="dropdown-menu-link">
                  <div id="nav-icon1">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <span class="menu-text">Meny</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li class="menu-search-bar show-for-large">
                <form action="{{ url('search/results') }}">
                  <div class="search">
                    <button type="submit" class="search-submit-button">
                      <i class="search-icon ion-android-search"></i>
                    </button>
                    <input name="q">
                  </div>
                </form>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="dropdown-content">
    <div class="row">
      <div class="small-12 columns hide-for-large">
        <ul>
          <li class="menu-search-bar search-bar-small-screen">
            <div class="search">
              <i class="search-icon ion-android-search"></i>
              <input name="search">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row small-up-1 medium-up-3 large-up-5">
      <div class="column column-block">
        <h4><a href="/page.html">Ideen</a></h4>
        <ul>
          <li>
            <a href="/page.html">Innholdsside</a>
          </li>
          <li>
            <a href="/news/artikkel">Artikkel</a>
          </li>
        </ul>
      </div>
      <div class="column column-block">
        <h4><a href="/page.html">Hva gjør vi?</a></h4>
        <ul>
          <li>
            <a href="/page.html">Innholdsside</a>
          </li>
          <li>
            <a href="/news/artikkel">Artikkel</a>
          </li>
        </ul>
      </div>
      <div class="column column-block">
        <h4><a href="/page.html">Proff</a></h4>
        <ul>
          <li>
            <a href="/article-list">Innholdsside</a>
          </li>
          <li>
            <a href="/news/artikkel">Artikkel</a>
          </li>
        </ul>
      </div>
      <div class="column column-block">
        <h4><a href="/page.html">Kunnskapsenter</a></h4>
        <ul>
          <li>
            <a href="/page.html">Innholdsside med lengre tittel</a>
          </li>
          <li>
            <a href="/news/artikkel">Artikkel</a>
          </li>
        </ul>
      </div>
      <div class="column column-block">
        <h4><a href="/page.html">Om oss</a></h4>
        <ul>
          <li>
            <a href="/page.html">Innholdsside</a>
          </li>
          <li>
            <a href="/news/artikkel">Artikkel</a>
          </li>
        </ul>
      </div>
    </div>

How can I do that? I have tried with using the function that I saw in the plugin file olivemenus/services/OlivemenusService.php:

{{ craft.olivemenus.getMenuByHandle('topBar')}}

Because I thought that function would just return the items of the menu, but I got an error message:

Neither the property "getMenuByHandle" nor one of the methods "getMenuByHandle()", "getgetMenuByHandle()"/"isgetMenuByHandle()" or "__call()" exist and have public access in class "Craft\OlivemenusVariable".

  • 1
    It doesn't look like that plugin offers much customization. I'm guessing a big part of choosing this plugin was the admin interface? I've had good luck using a Structure section and building out the nav myself. Admin interface works fine, and I can add any level of customization I want. – Scott Stubblefield Jun 6 '17 at 13:51
  • You might want to look for a menu plugin that's under more active development. {{ craft.olivemenus.getMenuByHandle('topBar')}} won't work because they don't expose that method to the template in github.com/OliveStudio/olivemenus/blob/master/variables/…. – Brad Bell Jun 6 '17 at 16:50
1

I wrote up a blog post on how to do Client Controlled Navigation. It's actually quite simple. All you need to do is create a structure for your nav, a couple of fields and then output the structure using any HTML you like.

The final code from the blog post is below:

{% set navigation %}

 {% set pages = craft.entries.section('navigation').level('<='~2) %}

 <ul>
   {% nav page in pages %}
     <li>
       {# Check for entry type / get related entry #}
       {% if page.type == 'internalLink' %}
           {% set linkedEntry = page.sitePageLink.limit(1).first() %}
           <a href="{{ linkedEntry.url }}"  data-url="{{ linkedEntry.url }}">{{ page.title }}</a>
       {% endif %}

       {# Check for entry type / get offsiteLinks #}
       {% if page.type == 'offsiteLink' %}
           <a href="{{ page.offSiteLink }}"  data-url="{{ page.offSiteLink }}" {% if page.openInNewTab == '1' %}target="_blank"{% endif %}>{{ page.title }}</a>
       {% endif %}

       {% ifchildren %}
          <ul class="dropdown" style="background:pink">
              {% children %}
          </ul>
      {% endifchildren %}

     </li>
   {% endnav %}
 </ul>

 {% endset %}

 {# replace data-uri with active class #}
 {{ navigation|replace({('data-url="' ~ craft.request.getUrl() ~ '"'): 'class="active"'})|raw }}
| improve this answer | |
1

Ok here my Solution

{% set navigation %}
{% set pages = craft.entries.section('eisbahnHauptnavigation').all() %}
    <ul class="menu">
        {% nav page in pages %}
            <li>
        {# Check for entry type / get related entry #}
            {% if page.type == 'internalLink' %}
            {% set linkedEntry = page.sitePageLink.limit(1).first() %}
                <a href="{{ linkedEntry.url }}"  data-url="{{ linkedEntry.url }}">{{ page.title }}</a>
            {% endif %}

            {# Check for entry type / get offsiteLinks #}
                {% if page.type == 'offsiteLink' %}
                <a href="{{ page.offSiteLink }}"  data-url="{{ page.offSiteLink }}" {% if page.openInNewTab == '1' %}target="_blank"{% endif %}>{{ page.title }}</a>
                {% endif %}

                {% ifchildren %}
                <ul class="submenu">
                {% children %}
                </ul>
                {% endifchildren %}

        </li>
    {% endnav %}
    </ul>
{% endset %}

{# replace data-uri with active class #}
{{ navigation|replace({('data-url="' ~ craft.app.request.absoluteUrl() ~ '"'): 'class="active"'})|raw }}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.