====== Creating your own menu ======
<WRAP center round info 60%>
The menu used on this version has been completely re-written and the code and script that generates it simplified
</WRAP>

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<sup>®</sup> 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 ====
<code javascript 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}
];
</code>
===== What it all means =====
==== Title ====

<WRAP indent>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 **//-//**.++
</WRAP>

==== URL ====
<WRAP indent>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.++
</WRAP>

==== subMenu ====
<WRAP indent>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.++
</WRAP>

==== Icon ====
<WRAP indent>'**icon**' is used to inject a //font-awsome//<sup>(r)</sup> icon into the menu.  It should include both icon classes but can include additional **//font-awsome//**<sup>(r)</sup> 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.
++
</WRAP>
==== position ====
<WRAP indent>
This entry controls the position of any icon added to the entry.  Possible values are 'right' **or** 'left'.  If no entry is present then the icon is assumed to be on the right.
</WRAP>
==== new_window ====
<WRAP indent>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. ++