20+ Responsive Navigation Solutions (Examples & Codes)

by Bradley Nice, Content Manager at ClickHelp.com ? software documentation tool

Here?s list of some old and new tutorials, jQuery plugins, CSS and JavaScript examples relating to Responsive Navigation for your website.

1. Circular Navigation with CSS (Tutorial & Source Code)

If you are bored with regular responsive styles, how about creating a circular looking navigation menu for your website? This awesome looking circular menu is not only ridiculously attractive but also responsive.

• Source
• Demo

2. Flexnav (jQuery plugin)

FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

• Source
• Demo

3. Google Nexus Website Menu (Tutorial & Source Code)

It?s another tutorial, which shows you how to reconstruct the sidebar menu of the Google Nexus 7 page. Little bit of CSS and Javascript gives it a nice sliding effect with rich modern look, overall it?s smartly done and something different for you to try on.

• Source
• Demo

4. Creating a Responsive Menu (Tutorial & Source Code)

This tutorial elaborates the process of creating a Responsive Menu with HTML, CSS & jQuery. Suitable for beginners and intermediate. Overall the result is also impressive.

• Source
• Demo

5. Smart menus (jQuery plugin)

Smart menus is an advance jQuery plugin that transforms regular website menus into flawless responsive navigation. It supports all devices, and their documentation covers everything you?ll ever require.

• Source
• Demo

6. Fixed Responsive Nav (JavaScript)

Fixed Responsive Nav is a fixed and touch friendly one page responsive navigation system for your website. It?s very light and no other JavaScript library required to run.

• Source
• Demo

7. Simple Responsive Navigation Menu (Tutorial & Source Code)

If you are looking for simple responsive navigation solution that works across all device screen sizes, and can be customized easily, then this simple tutorial could solve your problem.

• Source
• Demo

8. Multi-level Responsive Menu (Tutorial & Source Code)

The tutorial uses jQuery and CSS to create 3 Levels Deep Drop Down Menu. But the interesting fact is that the menu is totally responsive and shrinks to fit any device screen size.

• Source
• Demo

9. Responsive Mobile Menu (jQuery Plugin)

A simple responsive menu jQuery plugin that has been optimized for mobile devices using HTML5, CSS3 and jQuery.

• Source
• Demo

10. Navobile (jQuery Plugin)

Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.

• Source
• Demo

11. Responsive Retina-Friendly Menu (Tutorial & Source Code)

Create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game.

• Source
• Demo

12. Multi-level push menu (jQuery Plugin)

This jQuery plugin is inspired by Codrops MultiLevelPushMenu but unlike it not relaying on CSS 3D Transforms and therefore functional in older browsers too (i.e. IE 8).

• Source
• Demo

13. Pkabu (JavaScript)

No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs. This thing works on everything. We progressively enhance the experience for devices that support it.

• Source
• Demo

14. bigSlide (jQuery plugin)

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation. It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

• Source
• Demo

15. Mmenu (jQuery Plugin)

The menu can be positioned at the top, right, bottom or left, at the back, front or next to the page. Add a search field, header, footer, dividers, section indexer, counters, toggles and more.

• Source
• Demo

16. DoubleTapToGo (jQuery Plugin)

A simple slider menu for your responsive website. Just choose from dark or light theme and you are ready to go.

• Source
• Demo

17. jPanelMenu (jQuery Plugin)

• Source
• Demo

18. Fullscreen Pageflip Layout (Tutorial & Source Code)

• Source
• Demo

19. Responsive Multi-Level Menu (Tutorial & Source Code)

The main idea here is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the ?parent? level disappear.

• Source
• Demo

20. Four Responsive Navigation Menus (Freebies)

Four navigation menu templates that you can use in your projects for free. They are made without using any frameworks and in such a way that they won?t cause conflicts with the rest of your content.

• Source
• Demo

21. Responsive Navigation (CSS)

This project is an attempt to create a navigation system that provides basic functionality even without javascript, with CSS only.

• Source
• Demo

22. Responsive Navigation (Codepen Example)

Inspired by Dribbble shot this example is currently in test mode, which means it?s not production ready.

• Source
• Demo

23. Trunk.js (JavaScript)

Trunk.js tucks your navigation into the ?drawer? in portrait and displays it on top in landscape.

• Source

Have a nice day!

Bradley Nice,Content Manager at ClickHelp.com ? best online documentation tool for SaaS vendors