Menu Canvas Particle
Manage the way your menu is displayed with an offcanvas sidebar slides in from the left or right side of the page. Choose between Slide, Reveal and Push offcanvas animations. Optionally, you can display the offcanvas bar on the right or use the modal animation to display the menu in a modal. See Demo Page.
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements Menu Canvas particles require Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.
Go to Template/Theme Settings > select the Layout to add Menu Canvas particle (i.e: Home) -> Layout tab -> Drag and drop the Menu Canvas Particle from Particles panel (left corner) to the section you want to display the particle.
Settings
| Settings | Description |
|---|---|
| Menu | Select menu to be used with the particle. |
| Base Item | Select a menu item to always be used as the base for the menu display. |
| Start Level | Set the start level of the menu. |
| Max Levels | Set the maximum number of menu levels to display. |
| Render Titles | Renders the titles/tooltips of the Menu Items for accessibility. |
| Force Target Attribute | Adds target="_self" attribute to all menu links instead of omitting the default value. Fixes an issue with pinned tabs in Firefox where external links always open in a new tab. |
| Menu Toggle Text | Show the text label Menu next to the hamburger icon. |
| Module Id | Pick a Module |
| Chrome | Module chrome. |
| Visibility | Display the element only on this device width and larger. |
| CSS Classes | CSS class name for the particle. |
Style Tab
| Settings | Description |
|---|---|
| Toggle Color | Customize the toggle color if needed. |
| Toggle Color Hover | Customize the toggle color on hover. |
| Menu Behavior | Select the menu type displayed on click. |
| Menu Animation | There are two different menu animations to display the menu when toggled. |
| Show Close Icon | Use this option to create a close button and enable its functionality. |
| Offcanvas Animation | Common settings for Offcanvas animation. |
| Overlay | Use this option to add an overlay, blanking out the page, |
| Animation modes | Choose between Slide, Reveal and Push offcanvas animations. |
| Display on the right | Use this option to display the offcanvas bar on the right. |
| Menu Toggle Height | Set the height of a Menu Toggle. |
| Background Color | Customize the background color for offcanvas bar. |
| Inverse Color | Set light or dark color mode for nav icon, buttons and controls. |
| Modal Animations | Use the modal animation to display the menu in a modal. |
| Center vertically | Center the menu and the content vertically. |
| Nav Settings | Common settings for Nav |
| Menu Style | Choose the Menu Style. |
| Center horizontally | Center the menu and the content horizontally. |
| Nav Color | Customize the nav item color if needed. |
| Active Color | Customize the nav item hover/active color if needed. |
| Nav Header Color | Customize the Nav Header Color. |
| Margin Top | Set the top margin. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Just wanted to thank you for your wok on all of the JL Navbar, JL Canvas menu and Off Canvas Content. They especially lift Joomla sites to a much more professional looking level. This is an otherwise sadly neglected area for Joomla but is so important for the end user. They also make the site construction much more enjoyable.
Great work!
Especially like the Accordion effect, essential for e-commerce (I look forward to seeing it in JL Navbar) 😉