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.
This is a Joey ButtonPlus Launcher.
This is a Joey Image Launcher.

Stack Settings

My Image
My Image
My Image
My Image

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