Our friends over at PluginHero have just released the WordPress version of MeanMenu.
A menu system for converting a standard menu into a mobile/tablet responsive menu, media query independent.
Please note: This is not a menu system replacement. It is simply a lightweight piece of jQuery to convert a standard navigation into a mobile/tablet navigation.
MeanMenu only works for one menu per page.
If you are looking for drop down functionality on the desktop, MeanMenu doesn't do it. Use Superfish as well as MeanMenu. You can see Superfish + MeanMenu on all of our themes, for example Literary.
And yes, it works with jQuery 2.0 - obviously IE 7 & 8 will not work.
Live Demo: http://www.meanthemes.com/demo/meanmenu/demo.html
Just include the jQuery library (http://jquery.com)
Then this file (jquery.meanmenu.js)
in your HTML e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="assets/js/plugins/jquery.meanmenu.js"></script>
Then add the CSS for this after all of your other CSS in the <head> section.
<link rel="stylesheet" href="meanmenu.css" media="all" />
Then in your usual document.ready, this is working under the assumption your navigation is in
structure...jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
There are the following options (Options are shown with their defaults)...
meanMenuContainer: 'body'
- Choose where meanmenu will be placed within the HTML
meanMenuClose: "X"
- Single character you want to represent the close menu button
meanMenuCloseSize: "18px"
- Set font size of close button
meanMenuOpen: ""
- Text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans
meanRevealPosition: "right"
- Left right or center positions
meanRevealPositionDistance: "0"
- Tweak the position of the menu
meanRevealColour: ""
- Override CSS colours for the reveal background
meanScreenWidth: "480"
- Set the screen width you want meanmenu to kick in at
meanNavPush: ""
- Set a height here in px, em or % if you want to budge your layout now the navigation is missing.
meanShowChildren: true
- true to show children in the menu, false to hide them
meanExpandableChildren: true
- true to allow expand/collapse children
meanExpand: "+"
- single character you want to represent the expand for ULs
meanContract: "-"
- single character you want to represent the contract for ULs
meanRemoveAttrs: false
- true to remove classes and IDs, false to keep them
onePage: false
- set to true for one page sites, the navigation will close back up on itself on click
removeElements: ""
- enter comma separated values in here of elements you want hidden from the container of meanmenu e.g. if you had a search box called .search, enter ".search" in here
meanDisplay: "block"
- by default this is block, sometimes you may want to switch this to table or table-cell or inline-block etc. so now you can.