This small JavaScript file will help you add a burger menu to your websites.
It's really easy to implement :
1 . Make sure you included jQuery into your HTML
2 . Then, include jQuery Ultimate Burger Menu
<script type="text/javascript" src="jquery.ultimate-burger-menu.js"></script>
3 . Call the function burgerMenu() on the element corresponding to your site navigation
<script>
$('#nav').burgerMenu();
</script>
4 (optional) . Configure your burger menu. There's a list of parameters you can pass to the burgerMenu() function. Here's the complete commented list :
$('#nav').burgerMenu({
buttonBg: 'white', // background of the burger button
buttonWidth: '50px', // width of the burger button
buttonHeight: '50px', // height of the burger button
linkSelector: 'li a', // selector corresponding to your navigation links
linkText: function($a){ return $a.text() }, // function used to get the text of your navigation links, it can be overriden
fixed: true, // set to true if the burger menu has to follow the window scroll
zIndex: 100, // zIndex of the burger menu
top: 0, // offset top
buttonMargin: 10, // spacing between burgers if there's multiple burger menus to be displayed
lineColor: 'black', // color of the line into the burger
lineWidth: '30px', // width of the line into the burger
lineHeight: '5px', // height of the line into the burger
lineMargin: '5px', // spacing between lines into the burger
hideInitialNav: true, // hide your site navigation when the burger menu has to be displayed
menuWidth: '100%', // width of the menu
menuHeight: 'auto', // height of the menu
menuBackground: 'white', // background color of the menu (menu is displayed when clicking on the burger)
menuBorder: '1px solid black', // border around the menu
linkColor: 'black', // color of the links into the menu
linkBackground: 'white', // background of the links
linkPadding: '10px 10px', // padding of the links
linkTextDecoration: 'none', // text decoration on the links
linkBorderBottom: '1px solid black', // border bottom on the links
linkNoBorderOnLast: true, // make sure border bottom is not added on the last link
position: 'left', // position of the burger menu, can be "left" or "right"
keepButtonNextToMenu: false, // if set to true, the burger button will move if the menu is displayed
animateSpeed: 0, // if set to 0, the displaying of the menu is immediate, otherwise this is the duration of the animation
hideOnBodyClick: true, // hide the burger menu when clicking outside
showFromWidth: 0, // show the burger menu if window width >= 0
showUntilWidth: 640, // hide the burger menu if window width >= 640
translate: false, // if set to true, the page is translated when the menu is displayed, so the menu is not on top of the page but beside it.
overlay: false, // allows setting a semi-transparent background over the page when displayed. Values are false or an hexadecimal color (ex : overlay: '#434343')
customContent: false, // allows setting a custom html content that will fill the menu. Pass it an HTML string (customContent: '<p>Hello</p>')
customButton: false // allows setting a custom button. Pass it a jQuery element. It can be an image (customButton: $('<img src="..." />'))
});