This jQuery plugin allows changing navigation menu style for devices with small screens. It checks screen width and if it lower than the desired value, the plugin replaces menu with a link. Click on this link restores original menu.
Download adaptivemenu.jquery.js file. Include the plugin on a page.
<script src="adaptivemenu.jquery.js"></script>
Include the jQuery library before this plugin. Add hidden CSS class to you stylesheet
.hidden {
display: none;
}
Select a menu and call the adaptiveMenu()
method.
$(function() {
$('#menuId').adaptiveMenu();
});
You can set properties in the adaptiveMenu()
method.
$(function() {
$('#menuId').adaptiveMenu({
'width': 481,
'text': 'Show menu',
'openMenuLinkClass': 'adaptiveMenuTrigger'
});
});
width
property defines maximum screen width at which menu will be replaced with a link
text
link anchor
openMenuLinkClass
link CSS class
show
Opens the menu and hides the link
hide
Hides the menu and shows the link
Example
$(function() {
$('#menuId').adaptiveMenu({'show'});
});
This plugin checks screen width and if it is lower than width value (481px
by default), it adds hidden CSS class to the menu. Then it inserts a link with anchor from text and adaptiveMenuTrigger
class attribute. When you click on the link, the plugin removes hidden class from menu and adds it to the link.
Full example is located in index.html
, styles.less
(styles.css
) and main.js
files.