-
Replies
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 & 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
over 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
over 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 & 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 <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>
Here's what your code looks like: http://codepen.io/rafibomb/pen/madJf