• Spotlight
X

mmenu: App Menus with Sliding Submenus

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.

X

Midnight: Switch Fixed Headers

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.

 

X

scroll up bar: Hide the Top Bar when Scrolling Down

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.

X

Fly Side Menu

Recreate the Airbnb iOS7 app menu animation using CSS3 and jQuery

X

Jump To

Create a smooth jump to sub navigational menu in one JS call

X

stickUp

Allows an element or navigation bar to stick to the top as you scroll past it.

  • Spotlight
X

Anchorific

Generates anchored headings and anchor-based nested navigations automatically.

X

File Tree

Fully-interactive file tree with as little as a single line of code.

X

Context

Is a lightweight solution for contextual menus.

X

Hopscotch

Makes it easy for developers to add product tours to their pages.

X

Wheelmenu

Add a fully customisable Path-like wheel menu button to your website.