VisualNEO Web

Bootstrap Top Menu generator.
v 1.0

Sample App:
https://visualneo.com/tutorials/neotopmenu

Description

The neoTopMenu plugin for VisualNEO Web enables the creation of customizable, responsive top navigation menus based on the Bootstrap framework. This plugin supports various menu items, dropdowns, separators, and color customization, making it suitable for enhancing navigation in web applications. Here’s an overview of its primary commands and practical usage:

Initializing the Top Menu

The neoTopMenuInitialize command sets up the top menu in a specified container, with options for logo, title, theme, and positioning.

• Command: neoTopMenuInitialize
• Syntax: neoTopMenuInitialize "objId" menuLogo "menuTitle" theme "theMode"
• objId: ID of the container where the menu is created.
• menuLogo: URL for the menu logo image (optional).
• menuTitle: Title displayed on the menu (optional).
• theme: Theme or color style for the menu.
• theMode: Positioning mode for the menu (e.g., "fixed-top").

Example:

neoTopMenuInitialize "Container1" "logo.png" "My App" "Inverse" "Fixed top"

This command creates a top menu in Container1 with a logo, title, inverse theme, and fixed positioning​.

Adding Menu Items

The neoTopMenuAddItem command adds a new clickable menu item, linking to a page, URL, or function.

• Command: neoTopMenuAddItem
• Syntax: neoTopMenuAddItem "objId" "itemLabel" itemPosition itemLink
• itemLabel: Label for the menu item.
• itemPosition: Position in the menu (starting at 1).
• itemLink: URL, page name, or neo.subroutine() to trigger.

Example:

neoTopMenuAddItem "Container1" "Home" 1 "neo.homePage()"

This adds a “Home” item in the first position, linking to homePage subroutine.

Adding Dropdowns and Dropdown Items

The plugin supports dropdown menus through neoTopMenuAddDropdown, enabling grouped items under a single menu label.

• Commands:
• neoTopMenuAddDropdown: Creates a dropdown within the top menu.
• Syntax: neoTopMenuAddDropdown "objId" "dropdownId" "dropdownLabel" itemPosition
• neoTopMenuAddDropdownItem: Adds items to the dropdown menu.
• Syntax: neoTopMenuAddDropdownItem "objId" "dropdownId" "itemLabel" itemLink

Example:

neoTopMenuAddDropdown "Container1" "servicesDropdown" "Services" "Left"

neoTopMenuAddDropdownItem "Container1" "servicesDropdown" "Consulting" "consultingPage"

This creates a “Services” dropdown with a “Consulting” option inside it​.

Customizing Menu Colors

The neoTopMenuSetColors command allows setting custom colors for different parts of the menu, providing flexibility for theme alignment.

• Command: neoTopMenuSetColors
• Syntax: neoTopMenuSetColors "menuDarkColor" "menuLightColor" "menuAccentColor" "menuBackgroundColor" "menuDropDownColor" "menuFocusTextColor"
• menuDarkColor: Color for dark theme elements.
• menuLightColor: Color for light theme elements.
• menuAccentColor: Accent color for menu highlights.

Example:

neoTopMenuSetColors "#5e0f5f" "#ffffff" "#7e177f" "#a81caa" "#f8dcf8" "yellow"

This sets custom colors for the menu, aligning with the app’s color scheme​.

Practical Applications

The neoTopMenu plugin is suitable for:

• Web Navigation: Providing a structured, responsive top menu for page and section links.
• App Dashboards: Organizing tools and sections under dropdowns for streamlined access.
• Themed Interfaces: Customizing colors and layout to match branding or UI themes.

By enabling flexible menu creation with dropdowns, links, and styling, neoTopMenu enhances navigation and user experience in VisualNEO Web applications.

neoTopMenuInitialize

neoTopMenuAddItem

neoTopMenuAddDropdown

neoTopMenuAddDropdownItem

neoTopMenuAddDropdownSeparator

neoTopMenuSetColors

neoTopMenuResetColors

Created with the Personal Edition of HelpNDoc: Transform Your Word Doc into a Professional-Quality eBook with HelpNDoc