Sidr - Creating side menus. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).
It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own. Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN If you want to load the scripts from a CDN to save bandwith or improve the performance you can use jsDelivr. Demos & Usage Here are described differents ways of usage for this plugin, you can read and adapt them to your website’s requeriments. The Simplest Usage Create a div called sidr and place your menu there.
Cookbook. Minimal setup for tabs. This page introduces you to the minimal setup for tabs.
It's important to understand how this example works because it teaches you the theory behind tabs. Understanding this helps you to build any kind of tabs you want. Here is our example: First tab content. Tab contents are called "panes" Second tab content Third tab content standalone demo There are two terms being used: tabs are the elements that you click and panes are containers for your content that are associated with tabs. HTML code You can use any HTML element for tabs and for panes. <! JavaScript code The role of JavaScript is to "bind tabs to panes" and enable the tabbing effect. // perform JavaScript after the document is scriptable. First you must select the root element for tabs with a jQuery selector.
After this JavaScript one-liner everything is pure CSS coding. CSS Code CSS coding is the most work when making tabs. There are hundreds of different tab designs on the net and it's up to you what your own tabs will look like. DdSlick - a jQuery plugin for custom drop down with images. With traditional drop downs i.e. using <select><option></option></select> you are limited to only text and value.
But with this easily configurable jquery plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value. Take a look at the following demos in action. 1Basic Drop down using JSON Source: When using JSON to populate, the plugin requires the specific data format. 2Render from HTML select options //Make it slick!
Use HTML5 data attributes data-imagesrc and data-description with your regular HTML select elements to add images and description. 3GET Selected Dropdown Option You may use jquery .data() with your selector to get data from plugin. SelectedIndex (0 based), selectedItem (HTML 'li' element), selectedData (nested object with text, value, description, imageSrc) 4SET selected Dropdown Option Try an index between 0 to 4 5Callback Function on Dropdown Selection 6Dropdown with default selection.
Accessible Tabs Examples. Davist11/jQuery-One-Page-Nav. Flexible Nav jQuery library. Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page.
It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page. Nav links are distributed proportionally to the page sections. See how your scrollbar "weds" these links :) You can easily use it on any website with the Bookmarklet . Save this bookmark by drag and dropping it in your bar... FlexibleNav bookmarklet ...and click on it in any website ! This page is a 3-in-one document! First, it explains goals and possible usages of the library.
Download You can also use it in your websites. Download or fork me on github Usages Generation and Flexibility The library can generate for you the nav sidebar content providing elements to display in navigation. By default, it uses h1 to h3 elements to retrieve and locate the different sections of a document but you can override these elements selector. You have usually two kind of selected elements to use: