Customizing template of the Olive Menus plugin

Question

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".

Answer 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 }}

Answer 2

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 }}