Developer
Supported
Super Navigation
ExpressionEngine 4, ExpressionEngine 5, ExpressionEngine 6
Back to this add-on's main page
View Other Add-ons From Amici Infotech
Dropdowns & Mobile
General
tre
|
Posted: 16 November 2021 01:49 PM |
|
|
|
Just wondering if this has dropdowns and mobile nav in the can or if it’s something that must be programmed.
From the documentation, I’m not thinking anything is baked in there. But here’s a different question. I’m using a pure CSS nav system and I’m hoping I’ll be able to create what I need for it with this using the advanced feature. I need to add/have inputs for dropdown nav. This is my code. Possible?
<nav id="menu"> <input type="checkbox" id="trigger" class="trigger"> <label for="trigger"></label> <ul class="main-menu"> <li> <a href="link-1">Link 1</a> <input type="checkbox" id="link-1" class="arrow"> <label class="drop-icon" for="link-1"></label> <ul class="sub-menu"> <li><a href="sub-link1">Link 1 Sub Link 1</a></li> <li><a href="sub-link2">Link 1 Sub Link 2</a></li> </ul> </li> <li><a href="link-2">Link 2</a></li> <li><a href="link-3">Link 3</a></li> <li> <a href="link-4">Link 4</a> <input type="checkbox" id="link-4" class="arrow"> <label class="drop-icon" for="link-4"></label> <ul class="sub-menu"> <li><a href="">Link 4 Sub Link 1</a></li> <li><a href="">Link 4 Sub Link 2</a></li> </ul> </li> </ul> </nav>
|
|
|
Amici Infotech
|
Posted: 17 November 2021 03:24 AM |
# 1
|
|
Developer
|
Yes, totally possible. I would do something like this:
{exp:super_navigation:custom nav_short_name="main_navigation" prefix="nav" ul_class='main-menu|sub-menu' } {if nav:absolute_count == 1} <nav id="menu"> <input type="checkbox" id="trigger" class="trigger"> <label for="trigger"></label> <ul class="{nav:ul_class}"> {/if}
<li class="{nav:li_class}">
<a href="{nav:link}" title="{nav:link_text}" class="{nav:link_class}"target="{nav:target}"> {nav:link_text} </a>
{if nav:has_children} <input type="checkbox" id="link-{nav:absolute_count}" class="arrow"> <label class="drop-icon" for="link-{nav:absolute_count}"></label> {/if}
{nav:child} <ul class="{nav:ul_class}"> {nav:child:render} </ul> {/nav:child} </li>
{if nav:absolute_count == nav:absolute_results} </ul> </nav> {/if} {/exp:super_navigation:custom}
|
|
|