The DiviFlash Vertical Menu module provides a flexible and customizable way to create vertical navigation menus on your website. You can easily add menu items, organize them into submenus, and style them to match your website’s design. This module is perfect for creating clean and intuitive navigation experiences.
Content
Content
Select Menu: Choose the menu you want to display vertically. You must create a menu beforehand to use the vertical menu module.
Builder View
Show Submenu on Builder: Enable this option to have the builder display the submenus.
Settings
- Submenu Type: Choose the submenu reveal type. Choosing “Inner” will reveal the submenu inside the menu container and choosing “Outer” will reveal the submenu outside the menu container.
- Active State Style on Clicked: Enable this option to denote the active state with a different color. Only available if you choose “Inner” as the submenu type.
- Badge: Enable this option to use a badge on the vertical menu when hovering.
- Tooltip: Enable this option to use a tooltip on the vertical menu when hovering.
Menu Item Hover Animation
- Enable Item Animation: Toggle on to use menu animation on hover. Enabling this option will also reveal the following options.
- Select Animation: Choose from three different line animation presets for the vertical menu.
- Line Color: Choose the color of the line animation.
- Line Weight: Adjust the width of the animation line.
Background
Add a background color, gradient, image, and more to the module.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Alignment
Change the horizontal placement of the vertical menu relative to its container.
Text Style
Typography options for the text of the vertical menu.
Menu Items
- Item Gap: Adjust the gap between the menu items.
The rest of the options are for the color and size of the menu item icons and the menu container’s background, spacing, and border.
Submenu
- Container: Spacing and border options for the submenu container.
- Item: Spacing, color, and typography options for the submenu items.
Mega Menu
To use these options you must enable the mega menu from your WordPress dashboard. To learn more, click here.
Container
- Column Gap: Adjust the gap between the mega menu columns.
- Column Width: Adjust the width of the mega menu columns.
The rest of the options are for the background, spacing, and border of the mega menu container.
Item
- Item Gap: Adjust the gap between the mega menu items.
The rest of the options are for the color and size of the mega menu item icons and the menu item typography, spacing, and border.
Mega Menu Parent
Typography options for the mega menu parent.
Active State
Pick a different color to denote the active state of the main menu, submenu, and mega menu item.
Badge
- General: Alignment, typography, and background options for the main menu item badges.
- Submenu: Typography and background options for the submenu badges.
Tooltips
Typography and background options for the main menu and submenu tooltips.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margin and padding to the entire module’s container.
Border
Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.
Box Shadow
Add a shadow effect to the entire module.
Animation
Apply a reveal animation effect to the module and customize the delay, duration, repeat, etc. of the animation.
Advanced
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com
