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