• The next stage is then to make my current setup to be linked and appropriately styled. So for these I have these in my mind.
    • If the nav_child does not have children then make it link to the nav_child.url.
    • If the nav_child has children then make it just normal <li> tag for now without any additional style.
  • I have these codes now, displaying proper links.
  • These are the contents of main.html.
<!DOCTYPE html>
<html>
  <head>
    <title>{% if page_title %}{{page_title}} - {% endif %}{{site_name}}</title>
  </head>
  <body>
    <ul>
      {% for nav_child in nav %}
        {% if nav_child.children %}
          <li>{{ nav_child.title }}</li>
          {% include "nav_sub.html" %}
        {% else %}
          <li>
            <a
              class="ntg-link"
              href="{{ nav_child.url }}"
            >{{ nav_child.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    {{ content }}
  </body>
</html>
  • These are the contents of nav_sub.html.
<ul>
  {% for nav_child in nav_child.children %}
    {% if nav_child.children %}
      <li>{{ nav_child.title }}</li>
      {% include "nav_sub.html" %}
    {% else %}
      <li>
        <a
          class="ntg-link"
          href="{{ nav_child.url }}"
        >{{ nav_child.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
  • Now I am going to try MetisMenu again and implement the same things I used for my Toyota project.
  • The link to download MetisMenu is here, http://mm.onokumus.com/index.html.
  • My MetisMenu is now working although it is without style. Here are the codes.
<!DOCTYPE html>
<html>
  <head>
    <link
      href="/css/metisMenu.min.css"
      rel="stylesheet"
    >
    <title>{% if page_title %}{{page_title}} - {% endif %}{{site_name}}</title>
  </head>
  <body>
    <ul
      class="metismenu"
      id="ntg-metismenu"
    >
      {% for nav_child in nav %}
        {% if nav_child.children %}
          <li>
            <a
              aria-expanded="false"
            >{{ nav_child.title }}</a>
            {% include "nav_sub.html" %}
          </li>
        {% else %}
          <li>
            <a
              class="ntg-link"
              href="{{ nav_child.url }}"
            >{{ nav_child.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    {{ content }}



    <script src="/js/jquery.min.js"></script>
    <script src="/js/metisMenu.min.js"></script>
    <script>
      $("#ntg-metismenu").metisMenu();
    </script>
  </body>
</html>
  • Here are the codes for the nav_sub.html.
<ul aria-expanded="false">
  {% for nav_child in nav_child.children %}
    {% if nav_child.children %}
      <li>
        <a
          aria-expanded="false"
        >{{ nav_child.title }}</a>
        {% include "nav_sub.html" %}
      </li>
    {% else %}
      <li>
        <a
          class="ntg-link"
          href="{{ nav_child.url }}"
        >{{ nav_child.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
  • There was a problem that I cannot determine where I would like to put the aria-expanded="false" but it always in after <a> that is followed by <ul>.
  • In my case the <ul> is in the {% include "nav_sub.html" %}.
  • Next is to add some styles!!!!