Module

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

     

You must be logged in to post.

Dropdowns & Mobile

General

tre
tre

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
# 1
Developer
Amici Infotech

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}