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 ows-menu.js file showing the default menu and its elements.

ows-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: "Weather 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,  icon: "fa-solid fa-chart-simple",  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 url and title should be blank.Comment Including this is a top level menu item may cause problems.

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 ows-themeX classes.

Information

new_window

Use this set to true to have the link open in a new window rather than in place of your site.Information This is good practice if the link opens an external website. You don't want visitors to have house the browsers 'back' button to go back to your site.

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.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