POPDROP STACK
PopDrop is a beautifully simple PopOver and DropDown stack that makes conveying extra information simplicity itself. PopDrop makes popovers, dropdowns, tooltips and modal dialogs that look great.
Simple Setup
10 built in themes
Easy titles and styling
Lots of size and positioning options
Drop zone for any stack content
PopDrop works with any theme.
Smart Positioning
PopDrop will position itself to ensure that it appears within the viewable screen.
By selecting one of the auto positions it will appear either above or below the link dependent on scroll position.
There is even a setting to contain dropdowns to the width of the link or button that you are using to open them. This makes for easy set up and neat looking menus.
STYLES
Themes
There are 5 themes with 2 variants of each - normal and flat.
The flat themes have no shadows or decoration.
Custom
Switch to custom and you can personalize every colour line and shadow to your liking.
Themes
There are 5 themes with 2 variants of each - normal and flat.
The flat themes have no shadows or decoration.
Custom
Switch to custom and you can personalize every colour line and shadow to your liking.
Custom Styles
In custom mode you can choose individual colors and styles for every element of the Pop Drop.
Because the Pop Drop panel is a child stack you can easily copy your custom panels between Pop Drop stacks.
Once setup, multiple uses with ease.
MEGA
Mega Menus and Popovers
Choose the Mega width option and your PopDrops will occupy the full width of the screen.
You can even match the site max-width if required so your mega PopDrops don't get too wide on very large screens. This example demonstrates this feature.
NESTED
Multi-level PopDrops
You can launch a PopDrop from a link within another PopDrop.
This is ideal for making submenus and other simple navigation structures.
This example is set to Auto Vertical so that it will appear either above or below the button dependent on where the button is on the screen and the space available.
LAUNCHING
Launch
You can launch a PopDrop from anything that you can add a link to.
Simply add a link to some text or any other stack that you wish to click to show the PopDrop.
Add a custom attribute containing the PopDrop ID that you define in the stack settings.
The downloadable demo project shows examples of launching from Stacks buttons and text links.
Foundation Users Only
NOTE: The Foundation button stack does not support data-attributes.
With Button Plus v1 you can use the Data Attribute setting to enter the pop-drop attributes.
With Button Plus 2 everything is automatic. No attributes or link data are needed at all.
INTEGRATIONS
Zero Setup LaunchingButtonPlus 2
For ButtonPlus v2 users there is a direct child stack integration and you don't need to set anything.
Just click the Stacks add child (+) button, add a PopDrop and it is automatically linked.
All you then need to do is to add your content to the PopDrop drop zone as normal.
Learn how to use PopDrop with ButtonPlus 2 here.
MagicGellan 2
Magic Zone stack can now be used to integrate PopDrop menus in addition to the previous Foundation Dropdown option.
PopDrop gives a much greater degree of control, works more easily and looks great as a dropdown or mega menu in MagicGellan 2.
TIPLISTS
TipList Mode
Manage all your tooltips for a page from within one stack.
Use Stacks Partials for site wide tooltips and popovers
Use colors, lists and HTML in your tips.
See the TipList Setup page for more information.
Links Styles Stack
The PopDrop Link Styles stack helps you style PopDrop tooltip links differently from normal links on the page.
See the Stack Setup page for how to use it.
Simply check the "This is a nested PopDrop" setting in your second level PopDrop.
This will prevent this PopDrop from closing its parent when it opens.
Closing the parent PopDrop will close all nested PopDrops
This popover is using the built in "light" theme and is showing the optional title bar and close gadget.
Pop Drops can contain any stacks that you like, you are not just limited to text.
This is a tooltip.
When is a PopDrop not a popover?
When its a modal dialog box.
PopDrop modals can contain any other stacks that you drop in, not just text.
Steps:
1. Add a link to whatever you want to launch your Pop Drop (either text or another stack)
2. Change the link url to javascript:void(0)
(This will prevent it adding a # to the page url as it would if you just used a blank # as the link)
3. Click the + button and add a Custom Attribute
4. Always enter data-pop-drop as the name
5. In the value field enter the PopDrop ID that you set in the PopDrop main stack settings.
POPDROP
PopDrop is another free stack from Big White Duck. It works in any theme but also has a special integration for the ButtonPlus 2 stack when used in Foundation.
POPDROP
Big White Duck. Stacks for RapidWeaver.