service.rmlmenu.jquery is a jquery plugin that constructs a Responsive Multi-Level Menu. By adding CSS device media queries the menu comes up as a multi-level drop down menu on wide screens and as a popup menu on small devices.
- On a wide screen the menu comes up as a traditional horizontal menu. A submenu is revealed when you hover over one of the first 3 primary menu items using a mouse or when you tap on the item. Hovering over (or tapping on) any submenu item that has a submenu, will again reveal its sub-submenu.
- On smaller screens the horizontal menu is made invisible and replaced by a single ‘Menu’ button (on the top right of the screen). When you click/tap the button a popup menu appears that shows the 4 primary menu items. When you click/tap on an item that contains a submenu then the primary menu items dissapear and are replaced by a ‘Back’ menu item and the submenu items.
On a PC you can try the different menu layouts by making your browser window smaller/bigger. The breakpoint to switch layouts is defined in the CSS file that comes with the plugin. It is set to 64em (1024px).