A tutorial on how to create some nice custom drop-down lists with CSS and jQuery.
There are five examples with different looking drop-down menus and lists for various purposes.
OWL Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Multiple select is a jQuery plugin to select multiple elements with checkboxes. Multiple Select supports methods that allow programmatic control of the component.
SlickNav is a responsive mobile menu plugin for jQuery.
Twitter Bootstrap - the popular front end framework for building websites and apps. It favors simple, responsive design, and comes bundled with a sensible default stylesheet, a number of useful jQuery plugins and an icon set. Although it doesn’t come with much else, Bootstrap is very extensible.
In this article, you will find a collection of 50 must-have plugins you should know about for effective development with the framework.
FancySelect is a better select for discerning web developers everywhere and it is easy to use.
fullPage.js is a jQuery plugin to create fullscreen scrolling websites in a simple way. It adds an smooth scrolling to the one page site with vertical and landscape sliders forming the site. Compatible with old browsers.
doubleTapToGo is responsive and touch-friendly dropdown navigation.
The technique consists of three main parts:
A simple and lighweight jQuery plugin for cascading dropdowns.
The plugin allows you to implement a cascading dropdown using multiple select boxes in which one select box depends on the input from one or more separate select boxes. Once one or all (depending on the configuration) required select boxes contain a value, it will trigger an event that will fire off the dependant select box so it will fetch its own list.
maskMoney is a jQuery plugin to mask data entry in the input text in the form of money (currency).
Scrollbox is a simple, lightweight jQuery plugin to scroll a list like carousel or traditional marquee.
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.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
This tiny (5KB) jQuery bootstrap plugin turns any
div into a WYSIWYG rich-content editor. Here are the key features:
Shuffle is a jQuery plugin to categorize, sort, and filter a responsive grid of items
jInvertScroll is a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down.It's easy to setup and requires nearly no configuration.
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.
The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.
DateTimePicker is a jQuery plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms.
bigSlide is a tiny 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).
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.
jQuery Filter Table Plugin is a live searching/filtering for HTML tables in a jQuery plugin.
This plugin will add a search filter to tables. When typing in the filter, any rows that do not contain the filter will be hidden.
jQuery SerialScroll plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids.
kalendar is a jQuery plugin that helps you display a calendar with events, both Google Calendar and custom, on your website.
In this tutorial you are going to build a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
fieldChooser is a jQuery plugin for selecting from a list of fields or values (the source) and adding them to a new list (the destination).
You move fields from the source to the destination by dragging and dropping with multi-select. Fields themselves can be simple HTML elements or more complex containers.
desoSlide is simple jQuery image slider with thumbnails. You can control the slider by clicking or pressing your keyboard keys. Also there are some options to customize slider. Caption is avaliable for each image.
Swiper is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps.
Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers.
Galereya is responsive, easily customizable jQuery gallery with a masonry layout. Almost all animation and effects are based on CSS features.
Works on Chrome, Safari, Firefox, Opera(turned off some CSS animations), IE7+(Graceful degradation), Android browser, Chrome mobile, Firefox mobile, Safari on iOS and etc.
Sticky Sidebar is a jQuery plugin for sticky/fixed contents (headers, sidebars, footer, etc...)
A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.
It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.
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.
Dynatree is a dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.
Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet.
Freewall allows you to create many types of grid layout (flexible layout, images layout, pinterest-like layout, etc) with nice CSS3 animation effects and call back events.
Auto Fix Anything jQuery plugin will let you automatically fix position of any container on your website with one JS call. The plugin will detect when to fix/unfix the position automatically.
Pace makes a beautiful progress indicator for your page load and ajax navigation.
It will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!