Creating your own menu

The menu used on this site is a completely revised version of the default system based on a single JSON formatted javascript file. The script that loads it has been completely re-written to include additional features.

Shown below is the new version of menu.js file showing the default menu and its elements. Note it no longer possible to add icons to the top level of menu entries.

menu.js

menuSrc = [
  {title: "Dashboard",	       url: "index.html"},
  {title: "Today",	       url: "today.html"},
  {title: "Yesterday",	       url: "yesterday.html"},
  {title: "Today v Yesterday", url: "todayVyest.html"},
  {title: "Gauges",	       url: "gauges.html"},
  {title: "Records",   subMenu: true,	items: [
    {title: "This Month",   url: "recordsthismonth.html",    icon: "fa-solid fa-list"},
    {title: "This Year",    url: "recordsthisyear.html",     icon: "fa-solid fa-list-ul"},
    {title: "All Time",     url: "recordsalltime.html",      icon: "fa-solid fa-list"},
    {title: "Monthly",      url: "recordsmonthly.html",      icon: "fa-solid fa-list"},
    {title: "",		    url: ""},
    {title: "All records",  url: "recordsall.html",          icon: "fa-solid fa-list"}
  ]},
  {title: "Charts",        subMenu: true,  items: [
    {title: "Trends",         url: "chartstrends.html",    icon: "fa-solid fa-chart-line"},
    {title: "Select-a-graph", url: "chartsselect.html",    icon: "fa-solid fa-chart-line"},
    {title: "Historic",       url: "chartshistoric.html",  icon: "fa-solid fa-chart-column"}
  ]},
  {title: "Reports",   	 url: "noaareports.html"},
  {title: "Forum",     	 url: "#",    forum: true,  icon: "fa-solid fa-people-group fa-xs", new_window: true},
  {title: "Webcam",    	 url: "#",    webcam: true, icon: "fa-solid fa-camera fa-xs"}
];

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.

URL

This is the web address of the page to display. For pages on this site, it should be relative to the location of the pages of your site. If it needs to link to an external page it must start with 'http(s)://'.

If you want a menu bar across a dropdown menu (see below), then the title should be “-”. Comment Including this is a top level menu item will be ignored.

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

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

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

Creating your own menu

What it all means

Title

URL

subMenu

Icon

new_window