Sidr - A jQuery plugin for 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. FlexNav - A jQuery Plugin for Responsive Menus. A Device-Agnostic Approach to Complex Site Navigation FlexNav is 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.
Special attention is paid to touch screens using tap targets (the key feature of FlexNav). Tipue drop, a search suggestion box jQuery plugin. For a demo, enter tipue into the search box below Only jQuery Tipue drop only needs a browser that supports jQuery, it's responsive and works on all reasonably modern browsers.
Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Getting Started Copy the Tipue drop folder to your site and include the following in the <head> section of your page. The first line loads the Open Sans font from Google Web Fonts, which is optional. Also included in the download package is tipuedrop.min.js, a compressed release of the main tipuedrop.js plugin.
Below is the HTML to display the search box. Tipue drop can work as an additional feature to your current site search. Finally, you need to call the .tipuedrop() method. <script> $(document).ready(function() { $('#tipue_drop_input').tipuedrop(); }); </script> Tipue drop content The pages to be searched are held in the tipuedrop_content.js file. JSON mode Options show speed newWindow mode. Data Img - Two Blokes. Rstaib/jquery-steps. CSS Slide in panel. A CSS3 and jQuery powered slide-in panel, to quickly show side content, notifications or profile information.
Browser support ie Chrome Firefox Safari Opera 9+ There will be cases when you need to display side content (a notification, a user profile information…), and this content doesn’t fit into a tooltip. You may create a new page and link to it, but, when possible, it’s wise to avoid a page refresh. In these cases a panel that slides in from the side can be a good UX solution. It’s fast, can be easily animated using CSS3 transitions, and it’s something users are used to see (think how many times this effect is used in native mobile apps). 60 Vicons - Free Icon Set by Victor Erixon. Examples - jQuery Steps. Async Step Second Step Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor.
Nullam venenatis diam ac ligula elementum pellentesque. In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. CSS Responsive Tabbed Navigation. A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.
Browser support ie Chrome Firefox Safari Opera 9+ Tabbed navigations are very useful when you need to organize a considerable amount of side content. It’s very common to use tabs in a product page, for information like delivery options, product material info etc. Another use of tabs is in dashboards, where users need a quick way to switch from one panel to the other. The code behind this snippet is very straightforward. Icons credits: Vicons by the talented Victor Erixon.
Creating the structure The HTML is structured in 2 unordered lists (.cd-tabs-navigation and .cd-tabs-content) – the first one is the navigation and the second one the content, both wrapped into the .cd-tabs div. Adding style We used CSS media queries to change the navigation positioning from horizontal to vertical, and vice versa.