Features

  • Position navigation on left- or right-hand side of your page
  • Add header and footer to navigation slideout
  • Extensive slideout panel styling choices
  • Animation effects customization
  • Optional tile-based view
  • Optional sub-menu counters
  • Customize toggle colors and icon
  • Place the fixed-position navigation toggle on the left- or right-hand side of page
  • Dim main content when toggled
  • Layered sub-menus
  • Full screen slideout option
  • Include a search option for navigation pages
  • Use custom text in place of toggle icon

Example

This site uses the Navigation Bar stack for its navigation. Since having two navigation stacks on a page would not be practical, we’ve not included a live example on this page.


Using Slide Navigation

General

Menu Position
Allows you to choose which side of the page you’d like to have the hidden navigation slide out from. You can choose from either the left- or right-hand side of the page.

Toggle

Toggle Location
Choose whether you’d like the toggle, which triggers the navigation, to be placed on the left- or right-hand side of the page.

Toggle Icon
We’ve provided several different icon choices for your toggle button. You can also choose to use a bit of custom text instead of an icon for the toggle if you please.

Toggle Colors
Define the colors for the toggle icon, border and background.

Navigation Title Bar

Nav. Bar Title
Customize the text that you’d like to have appear at the top of the slide-out navigation pane.

Bottom Nav Bar
Allows you to have bit of custom text at the base of the navigation pane as well.

Styling

Background
Lets you set the background color of the slide-out navigation page.

Theme
If you’re using a light colored background you would choose the Light theme here. Using a darker colored background? You guessed it. Choose the Dark theme.

Border Style
Allows you to specify what sort of dividers you’d like between navigation items. Full-width borders, offset borders, or no borders at all.

Layered Sub Menus
If you’re using child-level navigation items, this allows you to layer the sub menu on top of its parent menu so that the parent is partially visible still when the child menu is showing. Adds a nice sense of depth to the navigation.

Shadow
Adds a subtle inner shadow to the navigation panel.

Full Screen
You can opt to have the navigation pane occupy the entirety of the browser window when the visitor opens the navigation.

Multi-line Page Names
Have long titles for your pages? Really long? Turn this feature on to allow those page names to wrap to the next line.

Tile View
A unique view for your page titles in which they’re divided up in to squared off, oversized sections.

Effects

Sliding Sub Menus
Have your child-level navigation panels slide into view with a nice smooth animation.

Menu & Item Effects
Select the animation style you’d like to use for animating the sub menus into place.

Dim Main Content
You can choose to dim the page, excluding the navigation, when the visitor has brought the navigation pane into view.

Advanced

Sub Menu Counters
Allows you to show how many child-level navigation items a parent navigation item has below it in the hidden child navigation panel.

Menu Search
Does your site have a lot of pages? If so you can add a search to the top of the navigation pane that lets the visitor search for the page they’re looking for.

Fixed Position Toggle
Enabling the feature ensures that the toggle for your navigation will alway be stuck to the top corner of the page.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us