The Slider Menu widget generates a navigation menu that is off-screen to start and appears in a sliding motion when a user clicks on a configured button. The Pushy library provides this functionality and has several options available in order to provide a flexible, capable, and responsive navigation menu.
This widget comes with a Custom Render Handler for the CommonSpot Tree Navigation Standard Element and a Custom Metadata Form. The Metadata Form is bound to the Render Handler and is used to offer the widget specific configuration options.
For developers, the configurable Widget Options, the Custom Render Handler file and the included Cascading Style Sheet and JavaScript files can be customized to fit your specific display scenario.
The Slider Menu Widget offers the following configurable properties via the Custom Metadata Form bound to the standard element Custom Render Handler:
Slider Properties (tab)
- Slider Position
- open from left
- open from right
- Slide Width - How wide in pixels the menu should be when it appears. Defaults to 200.
- Include Container - Choosing 'none' presents no other options on this tab.
- none
- above
- below
- above and below
- Container Margin - 0 to 999 pixels
- Top, Right, Bottom or Left
Menu Properties (tab)
- Menu Styles
- Text Color - many color options to pick from
- Slider Color - many color options to pick from
- Text Hover Color - many color options to pick from
- Overlay Color - none, light gray, gray, dark gray
- How dark you want the overlay to be when the menu appears.
- Enable Parent Links
- If enabled, clicking a menu item will open or close the tree node's sub-menu. Double-clicking will follow the node's link.
Open and Close Link/Button Properties (tabs)
These 2 tabs are basically the same, except one handles the Open Properties and the other handles the Close Properties.
For a detailed explanation of these fields, click here.
CommonSpot Standard Elements:
Link Elements:
- Tree Navigation
Required Custom Elements
Metadata Form:
-
CSW Slider Menu
Custom Render Handler:
- CSW Slider Menu RH
The Slider Menu Widget has the following importable components in the master import packet:
- Metadata Form
- Custom Render Handler
To set up the Slider Widget:
- Download the master import packet
- Import the Metadata Form
- Import the Render Handler
- Bind the Metadata Form to the custom render handler
- Associate the Render handler with the standard Tree Nav element.
- Place a Tree Nav element on a page
- Choose the custom render handler
- Configure your Slider Widget
For detailed information on how to import the various components, please see Importing Widgets.