Menu icon Foundation
Off-Canvas Menu Clickable Parent Link

I recently built an off-canvas menu using Foundation 5 that works really well right out of the box.  Two of the buttons, About and Solutions, have child elements.  The requirement is set that About and Solutions are clickable so users have the option to navigate to those parent pages or click on the arrow to view the child navigation.  Unfortunately, I cannot find any documentation nor any solutions that address this issue for what I am trying to accomplish.  

Below is the code I am using:

<div class="off-canvas-wrap" data-offcanvas>

  <div class="inner-wrap">

    <nav class="tab-bar">

        <div class="tab-bar-left">

            <ul class="title-area">

                <li class="name">

                    <img src="/images/logo-header.png" alt="Three Deep" />

                </li>

            </ul>

            <ul class="cta-mobile">

                <li><a href="tel:651.789.7701"><img src="/images/icon-phone.png" alt="Call 651.789.7701" /></a></li>

                <li><a href="#"><img src="/images/icon-mail.png" alt="Contact Us" /></a></li>

            </ul>

        </div>

 

      <section class="right-small">

        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>

      </section>

    </nav>

 

    <aside class="right-off-canvas-menu">

      <ul class="off-canvas-list">

            <!--li><label>Navigation</label></li-->

            <li class="has-submenu"><a href="about">About</a>

                <ul class="right-submenu">

                    <li class="back"><a href="#"></a></li>                    

                    <li><a href="#">Our Team</a></li>

                    <li><a href="#">Contact Us</a></li>

                </ul>

            </li>

            <li class="has-submenu"><a href="#">Solutions</a>

                <ul class="right-submenu">

                    <li class="back"><a href="#"></a></li>                    

                    <li><a href="#">SEO</a></li>

                    <li><a href="#">PPC</a></li>

                    <li><a href="#">Marketing Automation</a></li>

                    <li><a href="#">Analytics</a></li>

                    <li><a href="#">Web Development</a></li>

                </ul>

            </li>

            <li><a href="#">Careers</a></li>

            <li><a href="#">Resources</a></li>

            <li><a href="#">Work</a></li>

            <li><a href="#">Blog</a></li>

            <!--li class="has-submenu"><a href="#"><img src="/images/icon-search.png" class="over" alt="" /></a>

                <ul class="right-submenu">

                    <li class="back"><a href="#">Back</a></li>                    

                    <li><form id="mySearch">

                        <input type="search" name="search" placeholder="Search"/>

                        <input type="image" src="/images/search-button.png" name="submit" class="submit" />

                    </form></li>

                </ul>

            </li>

            <li class="last-child"><a href="#">Contact Us</a></li-->

        </ul>

        </li>

      </ul>

    </aside>

 

I have seen topics about top-bar, but nothing that addresses what I have built.

off-canvasmenutab-barclickable

I recently built an off-canvas menu using Foundation 5 that works really well right out of the box.  Two of the buttons, About and Solutions, have child elements.  The requirement is set that About and Solutions are clickable so users have the option to navigate to those parent pages or click on the arrow to view the child navigation.  Unfortunately, I cannot find any documentation nor any solutions that address this issue for what I am trying to accomplish.  

Below is the code I am using:

<div class="off-canvas-wrap" data-offcanvas>

  <div class="inner-wrap">

    <nav class="tab-bar">

        <div class="tab-bar-left">

            <ul class="title-area">

                <li class="name">

                    <img src="/images/logo-header.png" alt="Three Deep" />

                </li>

            </ul>

            <ul class="cta-mobile">

                <li><a href="tel:651.789.7701"><img src="/images/icon-phone.png" alt="Call 651.789.7701" /></a></li>

                <li><a href="#"><img src="/images/icon-mail.png" alt="Contact Us" /></a></li>

            </ul>

        </div>

 

      <section class="right-small">

        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>

      </section>

    </nav>

 

    <aside class="right-off-canvas-menu">

      <ul class="off-canvas-list">

            <!--li><label>Navigation</label></li-->

            <li class="has-submenu"><a href="about">About</a>

                <ul class="right-submenu">

                    <li class="back"><a href="#"></a></li>                    

                    <li><a href="#">Our Team</a></li>

                    <li><a href="#">Contact Us</a></li>

                </ul>

            </li>

            <li class="has-submenu"><a href="#">Solutions</a>

                <ul class="right-submenu">

                    <li class="back"><a href="#"></a></li>                    

                    <li><a href="#">SEO</a></li>

                    <li><a href="#">PPC</a></li>

                    <li><a href="#">Marketing Automation</a></li>

                    <li><a href="#">Analytics</a></li>

                    <li><a href="#">Web Development</a></li>

                </ul>

            </li>

            <li><a href="#">Careers</a></li>

            <li><a href="#">Resources</a></li>

            <li><a href="#">Work</a></li>

            <li><a href="#">Blog</a></li>

            <!--li class="has-submenu"><a href="#"><img src="/images/icon-search.png" class="over" alt="" /></a>

                <ul class="right-submenu">

                    <li class="back"><a href="#">Back</a></li>                    

                    <li><form id="mySearch">

                        <input type="search" name="search" placeholder="Search"/>

                        <input type="image" src="/images/search-button.png" name="submit" class="submit" />

                    </form></li>

                </ul>

            </li>

            <li class="last-child"><a href="#">Contact Us</a></li-->

        </ul>

        </li>

      </ul>

    </aside>

 

I have seen topics about top-bar, but nothing that addresses what I have built.