Menu icon Foundation
How to add a dropdown inside the Off-Canvas navigation

So I've finally gotten my off-canvas navigation working, and am now just trying to finish it up by adding a dropdown inside of it. Does anyone know of any way this is possible? Below is my code. I've tried adding a bunch of different classes and data attributes to try and get it to dropdown but none have worked so far. The link I'm trying to get to dropdown is the "Honeymoon" link

<nav class="tab-bar">
    <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>
    <section class="middle tab-bar-section">
        <h1 class="title uppercase">Island Wedding</h1>
    </section>
</nav>
<aside class="left-off-canvas-menu" id="mobile-header">
    <ul class="uppercase off-canvas-list">
        <li><a href="index.php">Home</a></li>
        <li><a href="bride.php">Bride</a></li>
        <li><a href="bridal-party.php">Bridal Party</a></li>
        <li><a href="groom-groomsmen.php">Groom &amp; Groomsmen</a></li>
        <li><a href="wedding-guest.php">Wedding Guest</a></li>
        <li><a href="beach-wedding-gifts.php">Gifts</a></li>
        <li class="has-dropdown"><a href="#" data-dropdown="drop">Honeymoon</a>
            <ul id="drop" class="f-dropdown" data-dropdown-content>
                <li><a href="honeymoon-turks-caicos.php">Turks & Caicos</a></li>
                <li><a href="honeymoon-grand-cayman.php">Grand Cayman</a></li>
                <li><a href="honeymoon-necker-island.php">Necker Island</a></li>
            </ul>
        </li>
    </ul> 
</aside>
            

         

off-canvashtmldropdown

So I've finally gotten my off-canvas navigation working, and am now just trying to finish it up by adding a dropdown inside of it. Does anyone know of any way this is possible? Below is my code. I've tried adding a bunch of different classes and data attributes to try and get it to dropdown but none have worked so far. The link I'm trying to get to dropdown is the "Honeymoon" link

<nav class="tab-bar">
    <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
    </section>
    <section class="middle tab-bar-section">
        <h1 class="title uppercase">Island Wedding</h1>
    </section>
</nav>
<aside class="left-off-canvas-menu" id="mobile-header">
    <ul class="uppercase off-canvas-list">
        <li><a href="index.php">Home</a></li>
        <li><a href="bride.php">Bride</a></li>
        <li><a href="bridal-party.php">Bridal Party</a></li>
        <li><a href="groom-groomsmen.php">Groom &amp; Groomsmen</a></li>
        <li><a href="wedding-guest.php">Wedding Guest</a></li>
        <li><a href="beach-wedding-gifts.php">Gifts</a></li>
        <li class="has-dropdown"><a href="#" data-dropdown="drop">Honeymoon</a>
            <ul id="drop" class="f-dropdown" data-dropdown-content>
                <li><a href="honeymoon-turks-caicos.php">Turks & Caicos</a></li>
                <li><a href="honeymoon-grand-cayman.php">Grand Cayman</a></li>
                <li><a href="honeymoon-necker-island.php">Necker Island</a></li>
            </ul>
        </li>
    </ul> 
</aside>
            

         
Nic Edwards almost 5 years ago

Looks good, just need to disable the close event on-click in JS. Usually when clicking on a main menu item to close the accordion, it shouldn't close the entire menu. It makes sense with a submenu item though.

Nic Edwards almost 5 years ago

Here's what your code looks like: http://codepen.io/rafibomb/pen/madJf

Robert Klitz almost 5 years ago

Figured it out for anyone wondering how to do it. Simply add the accordion js file to your scripts that are loaded and then follow my code below!

<nav class="tab-bar">
                <section class="left-small">
                    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
                <section class="middle tab-bar-section">
                    <h1 class="title uppercase">Island Wedding</h1>
                </section>
            </nav>
            <aside class="left-off-canvas-menu" id="mobile-header">
                <ul class="uppercase off-canvas-list">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="bride.php">Bride</a></li>
                    <li><a href="bridal-party.php">Bridal Party</a></li>
                    <li><a href="groom-groomsmen.php">Groom &amp; Groomsmen</a></li>
                    <li><a href="wedding-guest.php">Wedding Guest</a></li>
                    <li><a href="beach-wedding-gifts.php">Gifts</a></li>
                    <li>
                        <dl class="accordion" data-accordion>
                            <dd class="accordion-navigation">
                                <a href="#honeymoon-panel">Honeymoon &nbsp; <span class="fa fa-caret-down"></span></a>
                                <div id="honeymoon-panel" class="content">
                                    <ul>
                                        <li><a href="honeymoon-turks-caicos.php">Turks & Caicos</a></li>
                                    <li><a href="honeymoon-grand-cayman.php">Grand Cayman</a></li>
                                    <li><a href="honeymoon-necker-island.php">Necker Island</a></li>
                                    </ul>

                                </div>
                            </dd>  
                        </dl>
                    </li>
                </ul> 
            </aside>