Menu icon Foundation
Responsive menu with Motion UI

Hi! I am trying to make this toggler to animate the menu that shows after click on the hamburger. How do I apply motion here?

Thanks!

    <div class="title-bar" data-responsive-toggle="responsivehide" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle=""></button>
  	  <div class="title-bar-title">
  			<a href="http://colorale.dev" rel="home">
  				<img src="branding/logo-mobile.png" height="34" width="90">
  			</a>
  		</div>
	  </div>
  	<nav style="display: block;" class="top-bar " id="responsivehide">
  		<div class="row">
  		  <ul data-dropdown-menu="ddu7nb-dropdown-menu" data-accordion-menu="d59ts5-accordion-menu" aria-multiselectable="true" role="menubar" class="vertical medium-horizontal menu dropdown">
  				<li role="menuitem" class="divider"></li>
  				<li aria-label="Home" aria-expanded="false" aria-haspopup="true" role="menuitem" id="menu-item-0" class="menu-item menu-item-main-menu hide-for-small-only">
  					<a tabindex="0" href="#" el="home">
  						<img src="branding/logo.png">
  					</a>
  				</li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-119" class="menu-item menu-item-main-menu menu-item-works">
            <a href="#" class="menu-link main-menu-link">works</a>
          </li>
          <li role="menuitem" class="divider"></li>
          <li aria-controls="jfe4m7-acc-menu" aria-label="Careers" aria-expanded="false" aria-haspopup="true" role="menuitem" id="menu-item-115" class="menu-item menu-item-main-menu menu-item-careers has-dropdown is-dropdown-submenu-parent is-right-arrow opens-right"><a href="#" class="menu-link main-menu-link">Careers</a>
          	<ul data-submenu="" id="jfe4m7-acc-menu" aria-labelledby="menu-item-115" style="" role="menu" aria-hidden="true" class="vertical menu submenu is-dropdown-submenu first-sub">
            	<li role="menuitem" id="menu-item-125" class="menu-item menu-item-main-menu menu-item-contact is-submenu-item is-dropdown-submenu-item">
                <a href="#" class="menu-link sub-menu-link">Contact</a>
              </li>
            	<li role="menuitem" id="menu-item-126" class="menu-item menu-item-main-menu menu-item-login is-submenu-item is-dropdown-submenu-item">
                <a href="#" class="menu-link sub-menu-link">Login</a>
              </li>
            </ul>
          </li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-114" class="menu-item menu-item-main-menu menu-item-blog">
            <a href="#" class="menu-link main-menu-link">Blog</a>
          </li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-116" class="menu-item menu-item-main-menu menu-item-contact">
            <a href="#" class="menu-link main-menu-link">Contact</a>
          </li>
  			</ul>
  		</div>
  	</nav>

motiontogglemenuResponsive

Hi! I am trying to make this toggler to animate the menu that shows after click on the hamburger. How do I apply motion here?

Thanks!

    <div class="title-bar" data-responsive-toggle="responsivehide" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle=""></button>
  	  <div class="title-bar-title">
  			<a href="http://colorale.dev" rel="home">
  				<img src="branding/logo-mobile.png" height="34" width="90">
  			</a>
  		</div>
	  </div>
  	<nav style="display: block;" class="top-bar " id="responsivehide">
  		<div class="row">
  		  <ul data-dropdown-menu="ddu7nb-dropdown-menu" data-accordion-menu="d59ts5-accordion-menu" aria-multiselectable="true" role="menubar" class="vertical medium-horizontal menu dropdown">
  				<li role="menuitem" class="divider"></li>
  				<li aria-label="Home" aria-expanded="false" aria-haspopup="true" role="menuitem" id="menu-item-0" class="menu-item menu-item-main-menu hide-for-small-only">
  					<a tabindex="0" href="#" el="home">
  						<img src="branding/logo.png">
  					</a>
  				</li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-119" class="menu-item menu-item-main-menu menu-item-works">
            <a href="#" class="menu-link main-menu-link">works</a>
          </li>
          <li role="menuitem" class="divider"></li>
          <li aria-controls="jfe4m7-acc-menu" aria-label="Careers" aria-expanded="false" aria-haspopup="true" role="menuitem" id="menu-item-115" class="menu-item menu-item-main-menu menu-item-careers has-dropdown is-dropdown-submenu-parent is-right-arrow opens-right"><a href="#" class="menu-link main-menu-link">Careers</a>
          	<ul data-submenu="" id="jfe4m7-acc-menu" aria-labelledby="menu-item-115" style="" role="menu" aria-hidden="true" class="vertical menu submenu is-dropdown-submenu first-sub">
            	<li role="menuitem" id="menu-item-125" class="menu-item menu-item-main-menu menu-item-contact is-submenu-item is-dropdown-submenu-item">
                <a href="#" class="menu-link sub-menu-link">Contact</a>
              </li>
            	<li role="menuitem" id="menu-item-126" class="menu-item menu-item-main-menu menu-item-login is-submenu-item is-dropdown-submenu-item">
                <a href="#" class="menu-link sub-menu-link">Login</a>
              </li>
            </ul>
          </li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-114" class="menu-item menu-item-main-menu menu-item-blog">
            <a href="#" class="menu-link main-menu-link">Blog</a>
          </li>
          <li role="menuitem" class="divider"></li>
          <li role="menuitem" id="menu-item-116" class="menu-item menu-item-main-menu menu-item-contact">
            <a href="#" class="menu-link main-menu-link">Contact</a>
          </li>
  			</ul>
  		</div>
  	</nav>
Ale over 3 years ago

Sorry for the messy code, was ok on Atom.