Menu icon Foundation
top-off-canvas-menu

hello

I trying to get the top-off-canvas- toggle working on my site. Currently only the left and right are working .

I have attached my code below.

Any help would be greatly appreciated

<div ng-controller="OffCanvasDemoCtrl">
   <div class="off-canvas-wrap " >
  <div class="inner-wrap">
      <div class="sticky">
            <nav class="tab-bar" >

<!--            Back Button -->
                <section class="left-small">
<!--                <a class=" icon-left-open"  ng-click="$back()"  ><span></span></a>-->
                 <a class="top-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> 
                </section>
<!--            Main Menu Button -->
                <section class="middle tab-bar-section">
<!--                <a class="left-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> -->
                <h1 class="title" >{{$state.current.data.title | translate}}<span class="service" ></span></h1> 
                </section>
<!--            Language button-->
               <section class="right-small">
                   <a class="top-off-canvas-toggle " style="padding-left:10px;" ><i class="icon-globe"></i><span></span></a>
                </section>

            </nav>
          </div>
          

    <aside class="top-off-canvas-menu">
      <ul class="off-canvas-list" id="mainmenu">
        
        <li><label translate="menu_inflight_title"></label></li>
        <li class="has-submenu">
            <a ui-sref="app.home"  translate="menu_inflight_route_selector"></a>
        </li>
                
        <li><a ui-sref="app.onboard.ec" ui-sref-active="active"><i class="icon-glyph-18"></i><span translate="menu_inflight_onboard"></span></a></li>
        <li><a ui-sref="app.movies.list" ui-sref-active="active"> <i class="icon-glyph-79"></i><span translate="menu_inflight_movies"></span></a></li>
        <li><a ui-sref="app.tvs.list" ui-sref-active="active"> <i class="icon-glyph-78"></i> <span translate="menu_inflight_tv"></span></a></li>
        <li><a ui-sref="app.audios.list" ui-sref-active="active"> <i class="icon-glyph-77"></i> <span translate="menu_inflight_audio"></span></a></li>
        <li><a ui-sref="app.games.list" ui-sref-active="active">  <i class="icon-glyph-100"></i> <span translate="menu_inflight_games"></span></a></li>
        <li><a ui-sref="app.publications.list" ui-sref-active="active">   <i class="icon-glyph-85"></i>  <span translate="menu_inflight_publications"></span></a></li>
        <li><a ui-sref="app.menu" ui-sref-active="active"><i class="icon-glyph-106"></i>  <span translate="menu_inflight_menu">Menu</span></a></li>
        <li><a ui-sref="app.dutyfree" ui-sref-active="active"> <i class="icon-glyph-71"></i><span translate="menu_inflight_duty_free"></span></a></li>
        
      </ul>
    </aside>

 
      
       <aside class="top-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label translate="language_selection"></label></li>
                  <li><a ng-click="changeLanguage('en')">English</a></li>
                  <li><a ng-click="changeLanguage('de')">Deutsch</a></li>
                </ul>
       </aside>

    <section class="main-section">
        
        <div class="full-height" >
      <div  ui-view="main"  ></div>
      </div>
      
      
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
    </div>


<script>$(document).foundation({
    offcanvas: {
        // Sets method in which offcanvas opens.
        // [ move | overlap_single | overlap ]
        open_method: 'move',
        // Should the menu close when a menu link is clicked?
        // [ true | false ]
        close_on_click: true
    }
});</script>
<script>
   
    $(".off-canvas-list .has-submenu a").click(function () {
       $('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
    });
</script>

            

         

top-off-canvas-menutransitions

hello

I trying to get the top-off-canvas- toggle working on my site. Currently only the left and right are working .

I have attached my code below.

Any help would be greatly appreciated

<div ng-controller="OffCanvasDemoCtrl">
   <div class="off-canvas-wrap " >
  <div class="inner-wrap">
      <div class="sticky">
            <nav class="tab-bar" >

<!--            Back Button -->
                <section class="left-small">
<!--                <a class=" icon-left-open"  ng-click="$back()"  ><span></span></a>-->
                 <a class="top-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> 
                </section>
<!--            Main Menu Button -->
                <section class="middle tab-bar-section">
<!--                <a class="left-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> -->
                <h1 class="title" >{{$state.current.data.title | translate}}<span class="service" ></span></h1> 
                </section>
<!--            Language button-->
               <section class="right-small">
                   <a class="top-off-canvas-toggle " style="padding-left:10px;" ><i class="icon-globe"></i><span></span></a>
                </section>

            </nav>
          </div>
          

    <aside class="top-off-canvas-menu">
      <ul class="off-canvas-list" id="mainmenu">
        
        <li><label translate="menu_inflight_title"></label></li>
        <li class="has-submenu">
            <a ui-sref="app.home"  translate="menu_inflight_route_selector"></a>
        </li>
                
        <li><a ui-sref="app.onboard.ec" ui-sref-active="active"><i class="icon-glyph-18"></i><span translate="menu_inflight_onboard"></span></a></li>
        <li><a ui-sref="app.movies.list" ui-sref-active="active"> <i class="icon-glyph-79"></i><span translate="menu_inflight_movies"></span></a></li>
        <li><a ui-sref="app.tvs.list" ui-sref-active="active"> <i class="icon-glyph-78"></i> <span translate="menu_inflight_tv"></span></a></li>
        <li><a ui-sref="app.audios.list" ui-sref-active="active"> <i class="icon-glyph-77"></i> <span translate="menu_inflight_audio"></span></a></li>
        <li><a ui-sref="app.games.list" ui-sref-active="active">  <i class="icon-glyph-100"></i> <span translate="menu_inflight_games"></span></a></li>
        <li><a ui-sref="app.publications.list" ui-sref-active="active">   <i class="icon-glyph-85"></i>  <span translate="menu_inflight_publications"></span></a></li>
        <li><a ui-sref="app.menu" ui-sref-active="active"><i class="icon-glyph-106"></i>  <span translate="menu_inflight_menu">Menu</span></a></li>
        <li><a ui-sref="app.dutyfree" ui-sref-active="active"> <i class="icon-glyph-71"></i><span translate="menu_inflight_duty_free"></span></a></li>
        
      </ul>
    </aside>

 
      
       <aside class="top-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label translate="language_selection"></label></li>
                  <li><a ng-click="changeLanguage('en')">English</a></li>
                  <li><a ng-click="changeLanguage('de')">Deutsch</a></li>
                </ul>
       </aside>

    <section class="main-section">
        
        <div class="full-height" >
      <div  ui-view="main"  ></div>
      </div>
      
      
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
    </div>


<script>$(document).foundation({
    offcanvas: {
        // Sets method in which offcanvas opens.
        // [ move | overlap_single | overlap ]
        open_method: 'move',
        // Should the menu close when a menu link is clicked?
        // [ true | false ]
        close_on_click: true
    }
});</script>
<script>
   
    $(".off-canvas-list .has-submenu a").click(function () {
       $('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
    });
</script>

            

         
Rafi Benkual about 4 years ago

Looks like it's working here - http://codepen.io/rafibomb/pen/GpwMjW

I was trying to compare your markup with mine but didn't see anything obvious.

stephen freir about 4 years ago

Thanks for getting back to me Rafi

I have tried your code above but didn't work.

There is something conflicting.

I going to try subtracting elements.

I might also add I'm using foundation for angular.

I'll start by removing it