This is an old revision of the document!

Creating your own menu

The menu used on this version has been completely re-written and the code and script that generates it simplified

A single menu is generated and used in either the bar menu at the top of the screen or in the sidebar menu. As a result, both menus are identical in structure although different styling has been applied to both. One consequence of this is that Font-Awsome^® icons are not supported in the top level menu items.

Both menus only respond to click events and will close any open dropdown if you click another link.

menu.js

menu.js

menuSrc = [
	{title: "Now",                  url: "index.html"},
	{title: "Today",                url: "today.html"},
	{title: "Yesterday",            url: "yesterday.html"},
	{title: "Today V Yesterday",    url: "todayyest.html"},
	{title: "Gauges",               url: "gauges.html"},
	{title: "Records",              submenu: true,    items: [
		{title: "This Month",       icon:"",        url: "recordsthismonth.html"},
		{title: "This Year",        icon:"",        url: "recordsthisyear.html"},
		{title: "All Time",         icon:"",        url: "recordsalltime.html"},
		{title: "Monthly",          icon:"",        url: "recordsmonthly.html"},
		{title: "-"},
		{title: "All Records",		icon:"",		url: "recordsall.html"},
	]},
	{title: "Charts",               submenu: true,    items: [
		{title: "Trends",           icon: "fa-solid fa-chart-column",  url: "chartstrends.html"},
		{title: "Select-a-graph",   icon:"fa-solid fa-chart-line", url: "chartsselect.html"},
		{title: "Historic",         icon:"fa-solid fa-chart-simple", position: 'right',    url: "chartshistoric.html"}
	]},
	{title: "Reports",   url: "noaareports.html"},
	{title: "Forum",     forum: true,    new_window: true},
	{title: "Webcam",    webcam: true}
];

What it all means

Title

The 'Title' entry is used to set what will appear in the menu. Remember that as this is what gets displayed, long entries could cause your menu to wrap which should really be avoided. This element is required.
Menu bars
If you want a bar across a dropdown panel to separate entries, you should use a -.

URL

This is the web address of the page to display. For pages on this site, it should be relative to sites main pages. If it needs to link to an external page it must start with 'http(s)://'.
Important
A URL is not required if you are using a menu bar or the Forum and primary webcam link.

subMenu

This flags that the following section should be formatted as a dropdown menu. If it is present and true then it must be followed with the keyword items and a [ bracket. The whole section must then end with a closing ].
Information
In this system it is possible to have a subMenu inside another subMenu. However, you should avoid multiple subMenus as this will make your site difficult to navigate.

Icon

'icon' is used to inject a font-awsome^® icon into the menu. It should include both icon classes but can include additional font-awsome^® classes and / or ow-themeX classes.Information
The same menu construct is used for both the bar menu and the sidebar menu but they are formatted differently.
Icons can only be added to dropdown menu items.

new_window

Setting this to true will cause the target page to open in a new window. Information This is good practice if the link opens an external website. You don't want visitors to have use the back* button to re-load your site.</WRAP> ==== Special Cases ==== The two entries '**Forum**' and '**Webcam**' are considered special cases. The url should **always** be the **#** character. They should also always be either: * **forum: true** / **forum: false**. If **true**, then the link configured in CumulusMX will be inserted.c++ Important If the required url is not configured within CumulusMX then regardless of these settings, a link will not be included. * webcam: true / webcam: false. If true** then the url configured in CumulusMX will be inserted.
Note | You are responsible for the formatting of this page. If it is under your control, then use a template page to hold the image / video so that it follows the same style as the rest of the site. If not under your control then I suggest you make it open in a new window - see above. ++

Oaktree Weather Systems

Table of Contents