Foundation 6 - Off Canvas Stack
Off Canvas is a great UI component for dynamically displaying a centent other navigation inside panels. These panels can be animated from all 4 sides of a container. You can even fix them to the browser window. The navigation on this very webpage is accomploished using an Off Canvas. On small devices, the sidebar is hidden and opened with a menu. While on medium and large devices, the sidebsar is always displayed.
Vertical Tab in Off Canvas
This is an example of how to implement vertical Tabs wtih Off Canvas. For details on how the vertical tabs are implemented, look at the Vertical Tabs template.
The styles in the above swatch stack are simply a preference for backgrounds and borders. Feel free to tweak, add or remove any of them.
A Hamburer was used to open the Off Canvas, however, you could easily have used a Button as well.
Multiple Panels
You can have multiple panels on different sides of the Off Canvas container. These panels can also be fixed to the browser window.
Picture 1
Picture 2
Picture 3
Brice Canyon
Blah Blah Blah.... Writing in Markdown format is a simple and fast way to add styled text to your web pages.
- Ordered and Unordered Lists.
- Simple Links: Stacks can use Markdown Syntax too.
- Simple formatting: Bold and Italic.
- Code snippets:
10 PRINT "HELLO WORLD"
Acadia Natl Park
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
- Ordered and Unordered Lists.
- Simple Links: Stacks can use Markdown Syntax too.
- Simple formatting: Bold and Italic.
- Code snippets:
10 PRINT "HELLO WORLD"
Canyonlands National Park
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
- Ordered and Unordered Lists.
- Simple Links: Stacks can use Markdown Syntax too.
- Simple formatting: Bold and Italic.
- Code snippets:
10 PRINT "HELLO WORLD"