Trunk.js – Smooth, Responsive & Lightweight Nav Drawer

Trunk.js is created by Robert Luke who is a Front End Developer and Designer. It is a great way to display your menus responsively. On his website Robert mentions that most of the nav drawers are built with jQuery animations and there are “jittery or snapping results”. What’s different in Trunk.js is that the event is triggered  with jQuery but all the animations are done with CSS which makes the animation very smooth. Trunks is also built specifically to display well on mini tablets and mobile phones.

trunk,js

trunk,js

trunk,js

DEMO | DOWNLOAD


You may also like...

5 Responses

  1. realasrain says:

    Could the animation be faster? Or instant (no animation)?

    • designifyme says:

      HI,
      changing the timining can fix that e.g.:

      header.open,
      .content.open
      {
      -webkit-transform: translate3d(240px,0,0);
      -webkit-animation: open .0s ease-in-out;

      -moz-transform: translate3d(240px,0,0);
      -moz-animation: open .0s ease-in-out;

      transform: translate3d(240px,0,0);
      animation: open .0s ease-in-out;
      }

      &
      header.close,
      .content.close
      {
      -webkit-transform: translate3d(0,0,0);
      -webkit-animation: close .0s ease-in-out;

      -moz-transform: translate3d(0,0,0);
      -moz-animation: close .0s ease-in-out;

      transform: translate3d(0,0,0);
      animation: close .0s ease-in-out;
      }
      chaning these “.0s ease-in-out;” to zero removes the sliding and opens the menu instantly.
      I hope it helps.

  2. designifyme says:

    ChrisCarpenter1  Can you do a fiddle or just put the code somewhere so I can see?
    Thanks.

  3. ChrisCarpenter1 says:

    designifyme ChrisCarpenter1 problem solved, thanks 😀

  4. designifyme says:

    ChrisCarpenter1 Glad you managed to fix it! Thanks for visiting designify:)))

Leave a Reply

Your email address will not be published. Required fields are marked *