It could not be easier to use, just include the script in your page and initialize it. The items in your menu will get active class when the section referenced in your anchor is visible. It’s got a really small footprint and uses requestAnimationFrame to monitor scroll position.
Mmenu makes it easy for you to create a native-style mobile sliding menu for your website (including WordPress). The menu has a stylish look and feel behind a hamburger icon and works with almost any type of design.
Mmenu is an easy to use but customizable jQuery plugin. It includes a wide range of options, extensions and add-ons to fit your needs. No matter how large your nested menu structure is, everyone already is familiar with the sliding submenus used in native apps. The fixed header, search field and sub-item counters make navigating your menu even easier.
Customize everything about this plugin to make it your own. Choose from options such as:
- Background color
- Menu position
- Navigation style and flow
- Search fields
- Header or footer buttons
- Include photos, logo or other images
And what’s great about this little jQuery tool is that it looks great. With so many options — and in a style users are familiar with — this might be the only tool you need to finish up your mobile website design.
Midnight is a jQuery plugin to switch fixed headers on the fly.
What this means in practical application, is that a header can change color, weight or size based on the background. It works on scroll so that your header text or image is always optimized for on-screen environment.
Plus Midnight is pretty easy to use. Create your fixed navigation (or header) as you typically would, using whatever markup suits you, just make sure the header works well with position:fixed. Then take sections of your page that need a different aesthetic and add data-midnight=”your-class” to it, where .your-class is the class you are going to use to style that header.
Add a little styling and you are done. Use whatever CSS or markup you like for each one. They will be switched automatically when necessary. To make it all work, just load Midnight (and jQuery) and initialize. A little developer “magic” takes care of the rest.
You can further add customization with custom markup for each header as well.
There are a few known issues with this plugin and older browsers, so if you have a large user based operating in the pre-iOS 7 era, beware.
The scroll up bar jQuery plugin hides the top bar when scrolling down, and shows it when scrolling up. It’s especially useful on mobile interfaces to save space. The effect is similar to what using sticky navigation that later hides during the scrolling process.
There are multiple uses for the plugin — simple, bar with offset and viewport callbacks. All are available for preview and usage in the demo.
There are a handful of available options to work with. You can pass callback functions in initialization to handle bar visibility events.
enterViewport– when the bar enters the viewport
fullyEnterViewport– when the bar is completely in the viewport
exitViewport– when the bar completely leaves the viewport
partiallyExitViewport– when the bar goes from being fully in the viewport to only partially
Install is simple with a script and call or installation using Bower. The plugin is also supported by all major browsers including Chrome, Firefox, Safari, Opera and Internet Explorer.
Allows an element or navigation bar to stick to the top as you scroll past it.
Generates anchored headings and anchor-based nested navigations automatically.
Makes it easy for developers to add product tours to their pages.