Default Website Development: Difference between revisions

Default Website Development (view source)

Revision as of 10:30, 21 March 2024

278 bytes removed , 21 March

→‎Editing the website menu

NeilThomas

320

edits

@@ Line 27: / Line 27: @@
 ==Editing the website menu==
-The website menu is held in the file ''menu.js''.  An image of this is shown below:
+The website menu is held in the file ''my-menu.js''.  This ensures that it does not conflict with the existing menu.
- Menu configuration file for NEW CuMX template
+It is now possible to add dividing bars to sub-menus as well as extra menu items.  The menu is shown below:
- Last modified: 2022/07/05 11:39:38
- menu.js - typical name, you define the one used in setpagedata.js<br>
- It is STRONGLY RECOMMENDED that if you customise this file, you create a new file with a different name, e.g. mymenu.js
- and change setpagedata.js to use that file. This will avoid your customisations being accidentally overwritten during upgrades<br>
- Properties:
-   .title            - This is the text that appears in the menu bar.
-   .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow [mobile] menu ONLY)
-   .new_window:true  - forces the link to open in new browser window
-   .url              - This is the address of the page.  if it is to an external page on another site it must include the full url
-                       The two entries that are '#' are special and are configured by the website.
-   .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
-   .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
-  some text
+  <nowiki>
- menuSrc = [
+menuSrc = [
-     {title: "Now",         menu: "b",  url: "index.htm"},
+	{title: "Dashboard",    menu: "b",    url: "index.html"},
-     {title: "Today:,       menu: "b",  url: "today.htm"},
+	{title: "Today",        menu: "b",    url: "today.html"},
-     {title: "Yesterday",   menu: "b",  url: "yesterday.htm"},
+	{title: "Yesterday",    menu: "b",    url: "yesterday.html"},
-     {title: "Today-Yest",  menu: "b",  url: "todayyest.htm"},
+	{title: "Today-Yest",   menu: "b",    url: "todayVyest.html"},
-     {title: "Records",     menu: "b",  submenu: true,  items: [
+	{title: "Gauges",       menu: "b",    url: "gauges.html"},
-         {title: "This Month",     menu: "b",   url: "thismonth.htm"},
+	{title: "Records",      menu: "b",    submenu: true,       items: [
-         {title: "This Year",      menu: "b",   url: "thisyear.htm"},
+		{title: "This Month<i class=\"fa-solid fa-rectangle-list\"></i>",        menu: "b",    url: "recordsthismonth.html"},
-         {title: "All Time",       menu: "b",   url: "record.htm"},
+		{title: "This Year<i class=\"fa-solid fa-rectangle-list\"></i>",         menu: "b",    url: "recordsthisyear.html"},
-         {title: "Monthly",        menu: "b".   url: "monthmlyrecords.htm"},
+		{title: "All Time<i class=\"fa-solid fa-rectangle-list\"></i>",          menu: "b",    url: "recordsalltime.html"},
-    ]},
+		{title: "Monthly<i class=\"fa-solid fa-rectangle-list\"></i>",           menu: "b",    url: "recordsmonthly.html"},
-    {title: "Charts",       menu: "b",  submenu: true,   items: [
+		{title: "",					 menu: "b",	   url: "#"},
-         {title: "Trends",         menu: "b",   url: "trends.htm"},
+		{title:	"All records<i class=\"fa-solid fa-rectangle-list\"></i>",		 menu: "b",	   url: "records.html"}
-         {title: "Select-a-graph", menu: "b",   url: "selectchart.htm"},
+	]},
-         {title: "Historic",       menu: "b",   url: "historic.htm"},
+	{title: "Charts",    menu: "b",    submenu: true,    items: [
-    ]},
+		{title: "Trends<i class='fa-solid fa-chart-line'></i>",            menu: "b",    url: "chartstrends.html"},
-    {title: "Reports",      menu: "b",   url: "noaareport.htm"},
+		{title: "Select-a-graph<i class='fa-solid fa-chart-line'></i>",    menu: "b",    url: "chartsselect.html"},
-    {title: "Forum",        menu: "b",   url: "#",   forum: true,   new_window: true},
+		{title: "Historic<i class='fa-solid fa-chart-line'></i>",          menu: "b",    url: "chartshistoric.html"}
-    {title: "Webcam",       menu: "b",   url: "#",   webcam: true}
+	]},
-  ];
+	{title: "Reports",   menu: "b",    url: "noaareports.html"},
+	{title: "Forum",     menu: "b",    url: "#",    forum: true,    new_window: true},
+	{title: "Webcam<i class='fa-solid fa-camera'></i>",    menu: "b",    url: "#",    webcam: true}
+];
+</nowiki>
+'''Things to note'''
+* It is possible to use ''Font-Awsome'' icons in the menu
+*; You don't need to add sub-menu indicator icons as this is embedded in the code.
+* You can add menu dividers to the sub-menus by adding an entry as shown below:
+  '''{title: "", menu: "b", url: "#"}'''
+*; It can be placed in both menus, only the full screen menu or the mobile menu as required.
-* If you want to change the language, simply enter translations for the titles only.
+====Other changes====
-* If you want to add an entry copy the entry above and edit it as required.
+The mobile menu now collapses correctly if you select a different sub-menu - you don't have to close a submenu manually before you open another one.
-* To create a whole new sub-menu, copy and paste either the section that starts with the '''title: "Records"...''' or '''title: "Charts"...''' and then edit as required.
 ==An Alternative Default Website==