This is hopefully the first part (let’s say it’s in Beta!) of many great resources for those who are looking to start building or refreshing a responsive website. As we all know that in the modern web design era that responsive design has become of the favourite for many designers and developers as everyone want their website to run on many devices to grab more exposure.

Today for the first round-up of responsive resources are for those who want to create beautiful navigation systems, menus and tabs that been build for jQuery which is being used on over 49 million websites. These following jQuery Plugins have been chosen due ti its ease of use, easy to implement and that will help your website look more visually stunning on every devices.

1. Responsive Tabbed Navigation

Tabbed navigations are very useful when you need to organise a considerable amount of side content, It’s a very common use of tabs that you can find in a product page such as information like delivery options, product material info etc while another use of tabs are in dashboards, where users need a quick way to switch from one panel to the other.

The code behind this snippet is very straightforward as its been based on mostly CSS, plus a bit of jQuery that helps animate content height. The interesting point is the way we handled the user experience on small devices: in order to allow users to have as many buttons as they want, Codyhouse decided to let the navigation scroll horizontally on small devices, instead of hiding it completely or firing a drop-down menu.

2. mmenu

mmenu is the best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customisable through a wide range of options, extensions and add-ons and it will always fit your need

3. HorizontalNav

The HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of a site container. So if you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But with this plugin its makes it so easy and adds support for IE7 and some small amount of people still use it.

4. FlexNav

FlexNav been built to be 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. Specially attention has been paid to touch screens using tap targets which is the key feature of FlexNav.

5. Responsive Nav

Responsive Nav is a small JavaScript plugin that comes in at only 1.7 KB minified and Gzip’ed, this plugin will helps you to create a toggled navigation for small screens. As the Responsive Nav plugin uses touch events and CSS3 transitions for the best possible performance. It’s contains a “clever” workaround that makes it possible to transition from a height: 0, to a height: auto, which isn’t normally possible with CSS3 transitions. It works in all major desktop and mobile browsers and supports the very old IE 6 and newer IE versions.

6. Naver

Naver is a jQuery plugin that made for responsive navigation. It’s an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle. The navigation states can be also be animated and has been tested in Firefox, Chrome, Safari, IE7+.

7. Sidr

Sidr is a jQuery plugin thats creates an hidden side menus, on-the-fly based menu. Sidr can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods including existing or remote content for loading the content.

8. Responsive Tabs

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile

9. Slick Nav

SlickNav is a responsive mobile menu plugin for jQuery, it’s comes with number of features including a cross browser compatibility, keyboard accessible and it’s supports with multi level menus including many more features

10. MeanMenu

MeanMenu is a jQuery menu plugin for responsive designs and which is media query independent. The plugin has features such as a nice hide or see menu that allows you to have children menu items, you can even target navigation element to swap out with MeanMenu and with it’s orientation adjustment (centered menu will reposition when you tilt the device), you can also control screen width at which MeanMenu activates. This menu plugins comes along with configurable CSS.

11. slimMenu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

12. Navobile

jQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.