Slicknav: A Mobile Menu jQuery Plugin

Contact Us or call 1-877-932-8228
Slicknav: A Mobile Menu jQuery Plugin

Slicknav: A Mobile Menu jQuery Plugin

A number of jQuery plugins exist to make easier the process of making menus mobile friendly. The benefit of using these plugins - prepackaged jQuery code which you simply call from your page, after linking downloaded script and CSS files - is that you can quickly and easily enable some cool functionality. A potential drawback is that these plugins make some assumptions about how the mobile menu should look and behave, those most come with a set of parameters for customization; you can always, of course, modify CSS to achieve a desired look.

We will look at Slicknav, a popular jQuery mobile-menu plugin. We can see how Slicknav works by checking out their site itself - which, when viewed from a desktop browser, looks like this:

Slicknav from Desktop Browser

From a mobile device or with a browser sized more narrowly, the site looks like this:

Slicknav from Mobile Device

Slicknav simply takes an existing menu - an unordered list that we specify - and adds a copy of it for use as a mobile menu; Slicknav's CSS styles the mobile-view menu which is, by default, fixed to the top of the page. We write our own media queries to handle which menu (desktop or mobile) shows at what viewport width threshold.

To use Slicknav, we download the archived set of needed files (or clone from the projects GitHub page), include them on our page, and add our own media query. Let's look at Slicknav through an example.

Code Sample:

MobileMenus/Demos/jazzslicknav/index.html

Code Explanation:

Open MobileMenus/Demos/jazzslicknav/index.html in a mobile browser and in a code editor to view the code. Also open the associated CSS file, MobileMenus/Demos/jazzslicknav/css/style.css, in a code editor.

We use only two files from the content we downloaded from Slicknav:

  • We link slicknav.css, the Slicknav CSS file, with a link tag in the head of our file.
  • We link jquery.slicknav.min.js, the minified Slicknav JavaScript file, with a script tag in the head of our file, after first including (from a CDN) jQuery.

We call Slicknav from a jQuery ready block, specifying the menu we desire; in our case, it is the unordered list contained within the page's only nav tag. When we do this, Slicknav's JavaScript duplicates our menu and adds some custom CSS classes to hook into its CSS rules.

Last, in our own CSS file style.css, we add rules to hide the mobile menu and show the standard menu for wider browsers/desktops, and to show the mobile menu and hide the standard menu for narrower browsers/mobile devices:

.slicknav_menu {
	display:none;
}

@media screen and (max-width: 520px) {
	.slicknav_menu {
		display:block;
	}
	nav ul {
		display:none;
	}
}

The Slicknav plugin offers some customization options: you can specify the display title (which defaults to "menu"), the symbols to show when the menu is open/closed, and some other features.

One of the more useful options is to specify to which element the mobile menu should be attached. By default, the mobile menu is prepended to the body element; depending on the design and functionality of your page, you might find it better to attach the menu to another element, such as the header:

$('nav ul').slicknav({prependTo: 'header'});

Please see https://github.com/ComputerWolf/SlickNav or more documentation on the SlickNav plugin.

Next