Copy link to clipboard
Copied
Im trying to setup my liquid menu.
The problem is the code here http://docs.businesscatalyst.com/user-manual/Menus/build-dynamic-menu-using-liquid#customize-your-li... is missing a close </li> list
<ul class="nav navbar-nav">
{% if menu1.items %}
{% for i in menu1.items %}
{% if i.items %}
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="{{i.url}}">{{i.label}}<span class="caret"></span></a>
{% else %}
<li>
<a href="{{i.url}}">{{i.label}}</a>
{% endif %}
{% if i.items %}
<ul class="dropdown-menu" role="menu">
{% for j in i.items %}
<li><a href="{{j.url}}">{{j.label}}</a>
{% if j.items %}
<ul>
{% for k in j.items %}
<li>
<a href="{{k.url}}">{{k.label}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
Is this correct?
because ive setup my menu in dreamweaver and its come up with the missing </li> error?
but the source code works out ok?
here is my menu
<!--NAVBAR-->
<nav class="navbar navbar-light navbar-full">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> ☰ </button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar2"> <img src="../images/logos/flatout-logo-2016.svg" alt="LOGO" width="150"/>
<!--apps menu-->
{module_menu render="collection" menuId="1727703" template="" collection="app-menu"}
<ul class="nav navbar-nav pull-right m-l-1">
{% if app-menu.items -%}
{% for i in app-menu.items -%}
{% if i.items -%}
<!--main dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu2-{{i.label}}" aria-haspopup="true" aria-expanded="false" href="{{i.url}}">{{i.label}}</a> {% else -%}
<!--main nav items-->
<li class="nav-item"> <a class="nav-link" href="{{i.url}}">{{i.label}}</a> </li>
{% endif -%}
{% if i.items -%}
<!--dropdown nav items-->
<ul class="dropdown-menu navbar-light dropdown-menu-right" aria-labelledby="dropdownMenu2-{{i.label}}">
{% for j in i.items -%}
<li class="dropdown-item"> <a href="{{j.url}}">{{j.label}} </a> {% if j.items -%}
<ul>
{% for k in j.items -%}
<li class="dropdown-item"> <a href="{{k.url}}">{{k.label}}</a> </li>
{% endfor -%}
</ul>
{% endif -%} </li>
{% endfor -%}
</ul>
{% endif -%}
{% endfor -%}
{% endif -%}
</ul>
<!--main menu-->
{module_menu render="collection" menuId="1709398" template="" collection="main-menu"}
<ul class="nav navbar-nav pull-right m-l-1">
{% if main-menu.items -%}
{% for i in main-menu.items -%}
{% if i.items -%}
<!--main dropdown-->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1-{{i.label}}" aria-haspopup="true" aria-expanded="false" href="{{i.url}}">{{i.label}}</a> {% else -%}
<!--main nav items-->
<li class="nav-item"> <a class="nav-link" href="{{i.url}}">{{i.label}}</a> </li>
{% endif -%}
{% if i.items -%}
<!--dropdown nav items-->
<ul class="dropdown-menu navbar-light dropdown-menu-right" aria-labelledby="dropdownMenu1-{{i.label}}">
{% for j in i.items -%}
<li class="dropdown-item"> <a href="{{j.url}}">{{j.label}}</a> {% if j.items -%}
<ul>
{% for k in j.items -%}
<li class="dropdown-item"> <a href="{{k.url}}">{{k.label}}</a> </li>
{% endfor -%}
</ul>
{% endif -%} </li>
{% endfor -%}
</ul>
{% endif -%}
{% endfor -%}
{% endif -%}
</ul>
</div>
</nav>
Copy link to clipboard
Copied
anyone?
Copy link to clipboard
Copied
The code looks fine, can not test it at the moment, sorry.
DW doesn't understand liquid so it sees that your opening the li tag and then closing it two times.
That's because you can have 2 versions, one menu item without children, one with children (if i.items).
Paste the browsers source code in Dreamweaver and see if you have any html errors.
Copy link to clipboard
Copied
Thanks for the reply Mihai I put the source code into dreamweaver and getting missing ??
http://flatouttemplate.businesscatalyst.com/
Copy link to clipboard
Copied
oh god!!! Is there a tutorial on how to post on this forum?
Copy link to clipboard
Copied
Why would you post the entire menu here?
You made modifications to the original as you added a closing li tag where it shouldn't be and removed it from the end of the script:
e.g You added a li tag HERE1, and removed it HERE2
<ul class="nav navbar-nav">
{% if menu1.items %}
{% for i in menu1.items %}
{% if i.items %}
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="{{i.url}}">{{i.label}}<span class="caret"></span></a>
{% else %}
<li>
<a href="{{i.url}}">{{i.label}}</a>HERE1
{% endif %}
{% if i.items %}
<ul class="dropdown-menu" role="menu">
{% for j in i.items %}
<li><a href="{{j.url}}">{{j.label}}</a>
{% if j.items %}
<ul>
{% for k in j.items %}
<li>
<a href="{{k.url}}">{{k.label}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>HERE2
{% endfor %}
{% endif %}
</ul>
Here is another example to get you started again (goes 3 levels down):
{module_menu render="collection" collection="mainMenu" menuId="XXXX" template=""}
{% if mainMenu.items -%}
{% for i in mainMenu.items -%}
{% if globals.get.ID == i.url -%}
{% assign active = "active" -%}
{% else -%}
{% assign active = "" -%}
{% endif -%}
{% if i.items -%}
<li class="dropdown {{active}}">
{% else -%}
<li class="{{active}}">
{% endif -%}
<a href="{{i.url}}">{{i.label}}</a>
{% if i.items -%}
<ul class="dropdown-menu">
{% for j in i.items -%}
<li class="dropdown-submenu">
<a href="{{j.url}}">{{j.label}}
{% if j.items -%} <em class="fa fa-angle-right"></em>
{% endif -%}
</a>
{% if j.items -%}
<ul class="dropdown-menu" role="menu">
{% for k in j.items -%}
<li><a href="{{k.url}}">{{k.label}}</a> </li>
{% endfor -%}
</ul>
{% endif -%}
</li>
{% endfor -%}
</ul>
{% endif -%}
</li>
{% endfor -%}
{% endif -%}
Copy link to clipboard
Copied
was trying to paste the source code? Will give it a try and get back to you. Thanks