Menu icon Foundation

Foundation Forum

Foundation Forum

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

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

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.

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>

Master the Foundation Top Bar

Get up to speed FAST, learn straight from the experts who built Foundation.

Learn More
Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635