<link rel="stylesheet" href="SlickNav/dist/slicknav.min.css" />
<script src="SlickNav/dist/jquery.slicknav.min.js"></script>

<link rel="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

<script>
    $(function(){
        $('#menu').slicknav();
    });
</script>

'label' : 'MENU', // Label for menu button. Use an empty string for no label.
'duplicate': true, // If true, the mobile menu is a copy of the original.
'duration': true, // The duration of the sliding animation.
'easingOpen': 'swing', // Easing used for open animations.
'easingClose': 'swing' // Easing used for close animations.
'closedSymbol': '►', // Character after collapsed parents.
'openedSymbol': '▼', // Character after expanded parents.
'prependTo': 'body', // Element, jQuery object, or jQuery selector string to prepend the mobile menu to.
'appendTo': '', // Element, jQuery object, or jQuery selector string to append the mobile menu to. Takes precedence over prependTo.
'parentTag': 'a', // Element type for parent menu items.
'closeOnClick': false, // Close menu when a link is clicked.
'allowParentLinks': false // Allow clickable links as parent elements.
'nestedParentLinks': true // If false, parent links will be separated from the sub-menu toggle.
'showChildren': false // Show children of parent links by default.
'removeIds': true // Remove IDs from all menu elements. Defaults to false if duplicate set to false.
'removeClasses': false // Remove classes from all menu elements.
'brand': '' // Add branding to menu bar.
'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity".

'init': function(){}, // Called after SlickNav creation
'beforeOpen': function(trigger){}, // Called before menu or sub-menu opened.
'beforeClose': function(trigger){} // Called before menu or sub-menu closed.
'afterOpen': function(trigger){} // Called after menu or sub-menu opened.
'afterClose': function(trigger){} // Called after menu or sub-menu closed.

$('.menu').slicknav('toggle'); // Method to toggle the menu
$('.menu').slicknav('open'); // Method to open the menu
$('.menu').slicknav('close'); // Method to close the menu

.slicknav_menu {
    display:none;
}

@media screen and (max-width: 40em) {
    /* #menu is the original menu */
    .js #menu {
        display:none;
    }

    .js .slicknav_menu {
        display:block;
    }
}