My Image

Extra Content For TopBar

Joey Basics

Each Joey stack has 3 elements.

Joey Launcher

Menu Item Style, Buttons or Images the choice is yours

Joey Main Content

An area of slide down content below the TopBar Menu items triggered by a launcher

Joey Scroll Content

A drop zone of slide down content below the TopBar Menu Items triggered by the action of scrolling the page

Each of these elements are optional.

By combining different Joey stacks stacks on the page with different elements you can achieve many alternate configurations and effects.

Launchers can also reveal external content outside of the TopBar.

The only rule to remember is wherever you drop the Joey stack is where the Launcher will appear.

Joey Launchers

Click the Launchers to see them in operation. As you can see, Joey does not have to sit in the TopBar Drop Zone. You can use it anywhere on the page. It can also trigger content outside of TopaBar as well. These launchers trigger content in the main page body.

This is a Joey Launcher.

It is designed to match the existing TopBar Menus with the addition of optional FontAwesome Icons for the open and closed states. The Text also changes between states as does the Icon.

You can of course have it looking like a button or a pure menu item with no background (like the one in the top bar of this page)

This is a Joey ButtonPlus Launcher.

Drop a ButtonPlus into Joey’s Launcher drop zone and style it as you want. In this case it is in ghost mode with a horizontal wobble hover effect. The Text changes between states as does the icon

My Image
My Image
This is a Joey Image Launcher.

You can drop any image stacks into Joey’s Launcher drop zone. Joey controls the hover and click settings.

Stack Settings

My Image
My Image
My Image
My Image
My Image

External Floating Content Launched from the Joey Menu in the TopBar

Click Close External to close this window

Stacks on this Page

Each of the Launcher demonstrations is a Joey stack placed in the first column of a Foundation 2 Column stack. Their associated external contents are placed in the second column

The TopBar contains 3 Joey Stacks

The first one shows the Joey Logo for the top 150 pixels of scrolling and contains the Dropdown content launched by the "I Am Joey" link.

The second one contains a Magellan, set to appear after 160 pixels of scrolling

The Third One Opens the External Content Window