Differences

This shows you the differences between two versions of the page.

--- wiki:aw:the-menu [2025/10/13 10:40] – [Creating your own menu] Neil
+++ wiki:aw:the-menu [2026/04/09 14:33] (current) – Neil
@@ Line 1: / Line 1: @@
 ====== Creating your own menu ======
-<WRAP center round info 80%>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.</WRAP>
+<WRAP round info 80%>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.</WRAP>
-Shown below is the new version of **ows-menu.js** file showing the default menu and its elements.
+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.
-<code javascript ows-menu.js>
+<code javascript menu.js>
 menuSrc = [
   {title: "Dashboard",	       url: "index.html"},
@@ Line 12: / Line 13: @@
   {title: "Today v Yesterday", url: "todayVyest.html"},
   {title: "Gauges",	       url: "gauges.html"},
-  {title: "Weather Records",   subMenu: true,	items: [
+  {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"},
@@ Line 20: / Line 21: @@
     {title: "All records",  url: "recordsall.html",          icon: "fa-solid fa-list"}
   ]},
-  {title: "Charts",        subMenu: true,  icon: "fa-solid fa-chart-simple",  items: [
+  {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"},
@@ Line 33: / Line 34: @@
 ==== 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.</WRAP>
 ==== URL ====
 <WRAP indent>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.++</WRAP>
+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.++</WRAP>
 ==== subMenu ====
@@ Line 48: / Line 47: @@
 ==== 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 ows-themeX classes.
+<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 |
-Although you can now include icons in **any** menu entry, top level, dropdown buttons and subMenu entries, they will be removed from top level and dropdown buttons if you opt for the standard bar menu.  This is to preserve as much space as possible and to avoid confusion.
+The same menu construct is used for both the bar menu and the sidebar menu but they are formatted differently.
 ++++
 </WRAP>
 ==== new_window ====
-<WRAP indent>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.++</WRAP>
+<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.++ Important | If the required url is **not** configured within CumulusMX then regardless of these settings, a link will **not** be included.++
+  * **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. ++