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.
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.
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
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.
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+.
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.
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
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.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
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.