TipueLondon

Home

jQuery

CSS

HTML5

Other

Support

Shop

About & Contact

Popr

Popr is a small and simple popup menu jQuery plugin

Download

Popr

Popr is a small and simple popup menu jQuery plugin. It works on almost any element, and it's free and open source.
Download
Version 1.0

Popr is also on GitHub.

Demo

Click on any of the three items below.
Feugait nostrud
Dolore
Feugait delenit
Vero dolor et
Exerci ipsum
Vero dolor et
Feugait
Commodo quis
Malorum
Vero dolor et
Exerci ipsum

Simple, small, flat, cool

Popr displays simple and attractive popup menus in less than 5KB, CSS included. The menu can appear above or below almost any HTML element. Popr is open source and released under the MIT License, and is compatible with all modern browsers.

Getting Started

Copy the popr folder to your site and include the following in the <head> section of your page.
HTML
The first line loads jQuery via Google. The remaining lines load the Popr CSS and the Popr jQuery plugin.

Also included in the download package is popr.min.js, a compressed release of the popr.js plugin. You should use this if you don't intend to make any changes to the jQuery code.

Call the .popr() method. Include this towards the end of the page.

HTML

Creating a popup menu

To add a popup menu to an element, add the Popr class and the data-id data attribute. The data-id attribute links to a popr-box block of code via the data-box-id attribute.
HTML
You can stack the popr class, of course.
HTML

Options

The options for Popr are set as arguments in the .popr() method.
HTML
speed

The speed the popup menu displays, in milliseconds. The default is 200.

mode

The popup menu position, either top or bottom. The default is 'bottom'.

Overriding the mode inline

You can override the mode setting, and change the popup menu position, by using the data-mode data attribute.
HTML

Popr items don't have to be hyperlinks

Items in the popup menu don't have to be links. For example, you can use jQuery to handle a click event via an id selector.
HTML

Browser compatibility

Popr works with Chrome 31+, Microsoft Edge, IE9+, Firefox 35+, Safari 7.1+ and Opera 27+.

Support

We offer a range of flexible support plans for our jQuery plugins, including free.
© 2016, Tipue. Made in London.
About   Privacy   T&Cs