I would like to show an example of what I call "DOOP" or DOM Object Oriented Programming.
The CSS classes that are added in the above example translate the menu into view and changes the hamburger from three bars to an X. Each animation/transition is set to take 0.25 seconds. To render the animation more smoothly, I like to use CSS transitions instead of the top/right properties.
As you can see, this example is pretty easy to read, even if you aren't sure what is going on. The mobile menu is shown or hidden when something (the oh-so-loved/hated hamburger icon in this example) is clicked. I use "touchstart" as a listener for better mobile interaction.
Not real oop
Functions within the Object may be called elsewhere in the code. The Object's functions are not private so, you may call MobileMenu.showMenu() elsewhere in your app if needed.
There aren't any cool tricks or awesome snippets of code in this but it is much easier to read rather than dumping all of the code inside of the $('document').ready() function. I use this style when I validate forms, show/hide a lightbox, add functionality for a mobile menu, capture the scroll position for parallaxing/animating elements into the view… it is just easier for us humans to read. With the Object's name as a declaration of a function, I know exactly what is happening when a function is called. MobileMenu.showMenu() tells me to show the mobile menu. DesktopMenu.showSubnav() lets me know that I am wanting to show a subnav on the desktop/large navigation element.
I hope this technique helps some of you clean up your code so others will be able to jump in and know where you are headed with these functions. If anyone has any ways to improve this style, I would love to hear from you. Again, I am not a genius.