A simple but effective responsive menu that has a header and space for a logo
jQuery
A dropdown multi-level responsive menu with some nice design elements. Also check out this version that has a logo, perhaps more practical - and a white layout.
jQuery
An animated burger menu with single level navigation. Basic, but nice animations.
Javascript only
An animated burger menu with single dropdown levels. Basic, but seems to be running well and tests across the devices without issue...
Jquery
A basic but bulletproof responsive dropdown multi-level responsive menu. Code is a little untidy and doesn't use purely ul and li for the menu items.
CSS only
A dropdown responsive menu featuring icons and sub-lists.
jQuery
A beautiful job by Codyhouse. Responsive menu featuring three different styles of menu. Simple - just the top level menu. Sub-nav with a second level of navigation... and a Hero version that you can swap out to include the Swiper by idangerous as they work nicely together. Auto-hides on scroll but reappears when scrolling back towards the top of the page. The sub-nav remains sticky.
A production version of this menu can be seen on the Riverside Apartment, Taupo Accommodation website.
jQuery
Nice, basic 'mega menu' from Codrops. Can be modified to dropdown with mouseover event rather than a click
jQuery
Multi-level slideout menu, modified to suit HTML-based content rather than AJAX/dummy content.
jQuery
Nice multi-level responsive dropdown menu that features animation and logo top-left. A bit of a bee-atch to edit and customise.
jQuery 2.1.3
Multi-level responsive dropdown menu. Note that on wide screens the sub and sub-sub menu items are not shown, only the top level links.
jQuery 1-9
A responsive, very functional menu. Full display shown on widescreen, collapsing to a sliding panel menu on small screens. Icons provided by FontAwesome, a good range of preset icons is in the CSS files.
jQuery
A responsive, very functional menu. Full display shown on widescreen, collapsing to a sliding panel menu on small screens. Icons provided by FontAwesome, a good range of preset icons is in the CSS files. This excellent, versatile menu was modified by Piccante Web Design to feature a 'sticky' header menu.
jQuery
A very nice template and menu operation from graphicburger.com
jQuery
Nice off-screen sliding panel menu
jQuery
An adaptation by Piccante Web Design of the menu developed by Nick Salloum. Responds to device width of course, and the menu uses a transition of opacity to occupy the space left open on smaller devices.
jQuery
An adaptation by Piccante Web Design of the menu developed by Nick Salloum. Integrates an SVG icon for each menu item.
Javascript only
With thanks to the tutorial from CallMeNick, this menu has been significantly modified and given a tweak to make it stick - to the top of the page. Some jQuery magic has been added to animate parts of the page on scroll down. Also check out this version that includes the Skeleton responsive CSS framework.
jQuery
A beautiful design job by Codyhouse. Responsive menu featuring an icon-based navigation slider with a full-screen background image or video. This design is ideally suited to pages that require a maximum of 5-6 landscape orientated images on each page.
jQuery
Nice off-screen sliding panel menu
jQuery
Similar to the Bushell menu, this also has a left-aligned menu on larger screens reverting to a slide-in menu on smaller devices
jQuery
Nice multi level accordion menu with icons and animation
jQuery
Multi-level push responsive menu with subs and icons.
jQuery
Multi-level responsive menu with sub and sub menus.
Simple javascript
Simple responsive, effective top jquery menu. An added feature is the "sticky top" style of the menu.
jQuery 1-9
A responsive menu that features several ways of displaying sub menus - through slideout secondary menus and icons
jQuery
A stylish and functional menu that suits a single page or long page. Key nav items can be placed in the top menu bar as well as a secondary menu with icons appearing in the page layout.
jQuery
A stylish and functional menu. Key nav items can be placed in the top menu bar as well as appearing in the responsive side panel which allows multiple sub menus.
jQuery 1-11
Multi-level responsive menu with sub, sub-sub, etc menus.
Note that this menu has an issue with closing when scrolling on touch devices. A fix to the .js file works and can be viewed here. Thanks to Dusty for this solution.
The correct js file is loaded to the piccante.co website for its own function.
jQuery
A slick responsive menu that has multiple sub menu options as part of the left menu and a top links menu for often-used pages.
Note that on some mobile devices the menu does not operate after scrolling - only when the page is returned to the very top of the window
jQuery
Nice menu that suits an even numbered amount of menu items
jquery
Excellent responsive menu that fluidly reacts to viewport / browser size. Note: Works perfectly in IE8 and up (IE6 and IE7 overflow the container) i.e. requires Windows 7 or 8+
jquery 1.7.2
Simple horizontal responsive menu with animation on hover.
Keyframes, no jQuery
A new concept in responsive navigation menus where the (least important) right-orientated menu items form part of a dropdown menu on small screens and devices. This demonstration includes the responsive image technique of using srcset
jQuery
