Menu icon Foundation
toggle top-bar dropdown

hi guys,

is it possible to toggle the dropdown menu of the top-bar when you click on a menu item?

my menu obstructs al lot of a smartphone's screen when activated, check it out:

http://gemeengoed.com/_klanten/florence/

thanks in advance,
-sander

Screen shot 2014 02 10 at 02.06.08

<nav class="top-bar hide-for-large-up" data-topbar>
            <ul class="title-area">
              
              <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              <li class="name">
                <h1><a href="#">Florence Nightingale Instituut</a></h1>
              </li>
            </ul>  
            <section class="top-bar-section ">
              <!-- Right Nav Section -->
              <ul class="right ">
                <li><a class="left-off-canvas-toggle">Persoonlijk</a></li>
                <li><a data-orbit-link="headline-1">Zoek</a></li>
                <li><a data-orbit-link="headline-2">Over het FNI</a></li>
                <li><a data-orbit-link="headline-3">Educatie</a></li>
                <li><a data-orbit-link="headline-4">Wetenschap</a></li>
                <li><a data-orbit-link="headline-5">Webshop</a></li>
                  </ul>
                </li>
              </ul>
            </section>
          </nav>

            

         

top-bartoggletop-bar menudropdown

hi guys,

is it possible to toggle the dropdown menu of the top-bar when you click on a menu item?

my menu obstructs al lot of a smartphone's screen when activated, check it out:

http://gemeengoed.com/_klanten/florence/

thanks in advance,
-sander

Screen shot 2014 02 10 at 02.06.08

<nav class="top-bar hide-for-large-up" data-topbar>
            <ul class="title-area">
              
              <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              <li class="name">
                <h1><a href="#">Florence Nightingale Instituut</a></h1>
              </li>
            </ul>  
            <section class="top-bar-section ">
              <!-- Right Nav Section -->
              <ul class="right ">
                <li><a class="left-off-canvas-toggle">Persoonlijk</a></li>
                <li><a data-orbit-link="headline-1">Zoek</a></li>
                <li><a data-orbit-link="headline-2">Over het FNI</a></li>
                <li><a data-orbit-link="headline-3">Educatie</a></li>
                <li><a data-orbit-link="headline-4">Wetenschap</a></li>
                <li><a data-orbit-link="headline-5">Webshop</a></li>
                  </ul>
                </li>
              </ul>
            </section>
          </nav>

            

         
K Lim almost 6 years ago

you can do this with some javascript.

add a class OR id to the menu item (see below).

then in your javascript, handle the click event for the menu item and basically send a click to the toggle-topbar element.

 $('.menuItem').click(function(evt) {
    $('.toggle-topbar').click();
});
<h1><a href="#" class="menuItem" >Florence Nightingale Instituut</a></h1>

Sander Schouten almost 6 years ago

it works, thanks a lot! FYI i also found that if you attach the class "hide-for-large-up" or similar to "top-bar" solves the problem as well, without javascript addition. thanks again.