A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.
Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.
mmenu is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website or responsive website.
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.
The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize
menuFlip is a jQuery plugin for adding a ‘ flipping ’ effect to text based navigational menu items when hovered over without needing to use background images, which can be a pain.
A tutorial on how to create the effect of YouTube's little left side menu.
When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.
Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility
A mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using click events for tap targets.
Features
Superclick is a jQuery drop-down menu enhancement plugin sharing many of Superfish's features but focusses solely on click events to open and close submenus. This means that links with associated submenus will never be followed, they will simply toggle the visibility of the submenu.
Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box.
Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you've pressed.
doubleTapToGo is responsive and touch-friendly dropdown navigation.
The technique consists of three main parts:
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.
SooperFish is a customizable solution for animated dropdown menus. It combines the features of superfish, structured programming of Droppy and a ton of new features like multi-column dropdown menus and configurable show and hide animation with custom easing.
naviDropDown is a simple jQuery plugin which allows you to create a simple drop down menu, utilising hoverIntent, and jQuery’s own slideUp and slideDown effects.
You can also set the orientation of the drop down depending if your navigation is horizontal or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin
jqDock is a jQuery plugin that transforms images into a Mac-like Dock menu, with icons that expand on rollover!
The plugin works with images, or images within anchors, and has a number of configuration options which provide :
This large responsive horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu.
Subscribe to our email newsletter for useful, latest jQuery plugins sent out everyday.
