Menus in HyperCode

How to insert menus and navigation bar in your website

Menus or Navigation Bars are essential elements to help your site visitor quickly find what they are looking for. See how to use them.

For most sites, it is important to have a menu or navigation bar. These elements allow organizing the site by topics or subjects in a way that facilitates and speeds up navigation so that the visitor finds the information they are looking for more quickly.

In the vast majority of cases, the navigation menu is defined only in page "templates". It is very uncommon and not recommended for a content page to have its own navigation menu.

However, it is allowed to have more than one menu model if they are in templates that are not loaded simultaneously. For example, your site's "Home Page" template can have a navigation bar with a certain style and content, and the post pages can have another, with different style and content.

One of the first tasks to do after installing and configuring HyperFluxCMS is to create the Navigation Menu. See instructions.

A navigation bar can be a simple bar, usually horizontal, with items. Or some items can have sub-items, forming a more complex menu.

A navigation bar starts with the menu tag. Then you list its items, which can be items (indicated with menuitem) or submenus (indicated with menu).

The current version of HyperCode supports only two levels of menus, which is sufficient for the vast majority of sites: the main level and one submenu level. To obtain more levels, you need to use HTML, CSS, JavaScript, which must be edited by an experienced person, and that is not the purpose of this document.

By default, the HyperCode/HyperFluxCMS menu element is responsive and presents appropriate behavior to be displayed differently on large screens like computers and small screens like cell phones. The behavior, however, can be changed or adjusted using JavaScript and/or CSS.

Tag [menu]

The menu tag inserts a menu or navigation bar on the site. Or, if it is inside another open menu tag, it creates a submenu.

Syntax:

caption is a property that should only be provided if the menu is a submenu. It indicates the text to be displayed at the position where it is located.

path-to-image is optional and indicates an image, usually very small, that will be displayed in the navigation bar. It is only valid for the main menu, not for submenus.

Anonymous property

The "caption" property can be omitted and the text can be provided directly after the tag name.

Additional properties

Like most HyperCode Tags, menu optionally accepts the properties class, style, and id.

See Class, Style, id

Tag [menuitem]

The menuitem tag inserts an item into a menu, submenu, or navigation bar.

Syntax:

caption indicates the text to be displayed.

action is optional and indicates a JavaScript statement or function call to be executed/called when the visitor clicks on the menu option.

url is optional and indicates a url or site page or site post category that will be opened when the visitor clicks on the menu option.

target is optional and indicates a target window in which the URL will be opened. It should only be used with "url", having no effect if only action is used.

ONE of the properties action or url must be provided, but not both.

Additional properties

Like most HyperCode Tags, menuitem optionally accepts the properties class, style, and id.

See Class, Style, id

Examples:

The first item, when clicked, executes "window.close()" in JavaScript, which closes the current window.

The second item, when clicked, opens the Instagram page in a new window or tab.

The third item, when clicked, opens the page called "menu" in the current window/tab. If there is no page with that name, a listing will be displayed with posts that have "menu" as one of their categories.

About the URL

The "url" property can indicate:

• a full url of a page within the site or external, such as "https://hyperfluxcms.com/help";
• a relative url, if it is a page within the site, such as "/help"
• a post category within the site, such as "/economy", which will display a listing of posts that have "economy" as one of the categories.