Menu icon Foundation

My Posts


My Comments

Robert Klitz commented on Robert Klitz's post about 5 years

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>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Robert Klitz's post about 5 years

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>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content