Horizontal Sliding Menus with jQuery

So I needed to make a menu slide out to the left (while maintaining width) and I decided to try the jQuery animate() function to animate the menu's horizontal position. This requires me to not hide the element but not show the overflow either. As you can see from the pen below, it works pretty easily with overflow: hidden when the menu slides out to the right. When the menu needs to slide the to the left, however, this method doesn't work. The button on the top right demonstrates this.

Enter clip-path! Instead of using overflow: hidden I tell clip-path to clip off anything above, below, or to the right. On the flip side, I give a negate clipping which just so happens to be the width of the menu. This alone will get you most of the way but I ran into an issue where the "hidden" menu was causing a scrollbar to appear when it was collapsed. This was fixed by adding this:

body {
   overflow: hidden;
}

With that, it works great as you can see from the bottom right button.

See the Pen Horizontal Sliding Menus with jQuery by Galastun (@galastun) on CodePen.