Responsive menus

Sticky responsive menu with header

Sticky menu with header

A simple but effective responsive menu that has a header and space for a logo

jQuery

By Lemoncloud

Navpad multi-level responsive menu

NavPad Navigation

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

By Guipaduaan

'Perfect' responsive menu

'Perfect' Responsive Navigation

An animated burger menu with single level navigation. Basic, but nice animations.

Javascript only

By Kilian Valkhof

Kotas (Amy) responsive dropdown menu

Amy Kotas Responsive Dropdown Navigation

An animated burger menu with single dropdown levels. Basic, but seems to be running well and tests across the devices without issue...

Jquery

By Amy Kotas

Pure CSS responsive menu

Pure CSS Responsive Dropdown Navigation

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

By CSS Script.com

Stripe Responsive Navigation

Codyhouse Stripe Navigation

A dropdown responsive menu featuring icons and sub-lists.

jQuery

By Codyhouse

Auto Hiding Navigation

Codyhouse Auto Hiding Navigation

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

By Codyhouse

Horizontal dropdown responsive menu by Codrops

Horizontal dropdown menu

Nice, basic 'mega menu' from Codrops. Can be modified to dropdown with mouseover event rather than a click

jQuery

By Codrops

Multi-level responsive menu by Codrops

Multilevelmenu

Multi-level slideout menu, modified to suit HTML-based content rather than AJAX/dummy content.

jQuery

By Codrops

Emre - multi-level responsive menu with logo top left

Emre menu

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

By Emre

Meanmenu - multi-level responsive menu

Meanmenu

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

By Mean Themes

Vertical responsive menu

Vertical responsive menu

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

As seen on Github by Cleidson Franca

Vertical (sticky) responsive menu

Vertical sticky responsive menu

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

As seen on Github by Cleidson Franca

Guide template and responsive menu

Guide template and responsive menu

A very nice template and menu operation from graphicburger.com

jQuery

By Graphic Burger

Adrian Gyuricska - off-canvas menu

Off Canvas menu

Nice off-screen sliding panel menu

jQuery

As seen on Codepen by Adrian Gyuricska

Smegnick

Smegnick responsive menu

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

Credit to CallMeNick

Iconick

Iconick responsive menu

An adaptation by Piccante Web Design of the menu developed by Nick Salloum. Integrates an SVG icon for each menu item.

Javascript only

Credit to CallMeNick

Sticky Responsive

sticky responsive menu

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

Credit to CallMeNick

Codyhouse Hero Slider

Codyhouse Hero Slider

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

By Codyhouse

Bushell - off-screen menu

Bushell

Nice off-screen sliding panel menu

jQuery

Tutorial by David Bushell

Shay Howe menu

Shay Howe menu

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

As seen on the Shay Howe website

Multiple level accordion side menu

Multi level accordion menu

Nice multi level accordion menu with icons and animation

jQuery

By Codyhouse

Multi-level push menu with subsubs

Multi-level-push menu

Multi-level push responsive menu with subs and icons.

jQuery

By Make.RS

Multi-level responsive menu with sub and sub-subs

Web Tuts plusresponsive menu

Multi-level responsive menu with sub and sub menus.

Simple javascript

By Web Design Tuts+

Trunk - simple effective responsive menu

Trunk menu

Simple responsive, effective top jquery menu. An added feature is the "sticky top" style of the menu.

jQuery 1-9

By Rob Luke Design

Codyhouse - mega responsive menu

Codyhouse mega responsive menu

A responsive menu that features several ways of displaying sub menus - through slideout secondary menus and icons

jQuery

By Codyhouse

Codyhouse - secondary fixed responsive menu

Codyhouse secondary fixed menu

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

By Codyhouse

Codyhouse - secondary responsive menu

Codyhouse secondary menu

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

By Codyhouse

Slim menu

Slim menu

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

By adnantopal

Nexus menu

Nexus menu

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

By Codrops

Responsive block menu

Call me Nick responsive menu

Nice menu that suits an even numbered amount of menu items

jquery

By Call Me Nick

Hongkiat responsive menu

Hongkiat responsive menu

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

By Hongkiat

Navigateur

Navigateur responsive menu

Simple horizontal responsive menu with animation on hover.

Keyframes, no jQuery

By Mike King

Okaynav

Okaynav responsive menu

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

By Flo Preynat

Join us on Facebook Join Piccante on Facebook | Follow us on Twitter Follow piccanteweb on Twitter | View our latest website