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