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.
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.
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
Plus stacks contain original code
© Joe Workman