|
=== Adding new pages to the new site menus ===
Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once.
You will find them (one for large screens, one for mobile)it in the /js/setpagedatamenu.js file defined as twoa longsingle stringsobject.
Here is the full menu...
<nowiki>
menuSrc = [
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
{title: "Now", menu: "b", url: "index.htm"},
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Today", menu: "b", url: "today.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Yesterday", menu: "b", url: "yesterday.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Gauges", menu: "b", url: "gauges.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Records", menu: "b", submenu: true, items: [
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "This Month", menu: "b", url: "thismonth.htm"},
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "This Year", menu: "b", url: "thisyear.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "All Time", menu: "b", url: "record.htm"},
'<div class="w3-dropdown-hover">' +
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"}
'<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Charts</button>' +
]},
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
{title: "Charts", menu: "b", submenu: true, items: [
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Trends", menu: "b", url: "trends.htm"},
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"},
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
{title: "Historic", menu: "b", url: "historic.htm"}
'</div>' +
]},
'</div>' +
{title: "Reports", menu: "b", url: "noaareport.htm"},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true},
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
{title: "Webcam", menu: "b", url: "#", webcam: true}
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">☰</button>';</nowiki>
];
</nowiki>
You can see each page is defined in this format...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},</nowiki>
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
Where:
</nowiki>
title = the text that appears on the menu
You can just add to this string variable, and the new menu item will then appear on every page. So to add a NOAA page add this...
menu = b - appears on both the full and mobile menus, w - show on full (wide) menu only, n - show on mobile (narrow) menu only
You can just add new items to this object, and the new menu item will then appear on every page. So to add a Custom page add this...
<nowiki>
{title: "Custom", menu: "b", url: "custom.htm"},</nowiki>
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
</nowiki>
So it becomes...
<nowiki>
{title: "Now", menu: "b", url: "index.htm"},
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
{title: "Today", menu: "b", url: "today.htm"},
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Custom", menu: "b", url: "custom.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Yesterday", menu: "b", url: "yesterday.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Gauges", menu: "b", url: "gauges.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Records", menu: "b", submenu: true, items: [
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "This Month", menu: "b", url: "thismonth.htm"},
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
{title: "This Year", menu: "b", url: "thisyear.htm"},
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "All Time", menu: "b", url: "record.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "Monthly", menu: "b", url: "monthlyrecord.htm"}
'<div class="w3-dropdown-hover">' +
]},
'<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Charts</button>' +
{title: "Charts", menu: "b", submenu: true, items: [
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
{title: "Trends", menu: "b", url: "trends.htm"},
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Select-a-graph", menu: "b", url: "selectachart.htm"},
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Historic", menu: "b", url: "historic.htm"}
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
]},
'</div>' +
{title: "Reports", menu: "b", url: "noaareport.htm"},
'</div>' +
{title: "Forum", menu: "b", url: "#", forum: true, new_window: true},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Webcam", menu: "b", url: "#", webcam: true}
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">☰</button>';
</nowiki>
Where I have inserted the new NOAACustom page between "This YearNow" and "RecordsYesterday"
Submenus can also be defined, they use the property "submenu: true", and then have an array of submenu items (defined as above) added to the "items: []" array.
You will also find an example extended menu called "menuSample.js" in the webfiles/js folder.
Note: the forum and webcam menu items only have special properties "forum" and "webcam", these are used by the main page code to determine if these menu items should be displayed or not.
You will need to do a similar thing for the mobile menu, which begins...
<nowiki>
let mobileMenu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">Now</a>' +
</nowiki>
Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish.
=== Making changes to the pages===
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard. There are just a few classes that are really useful.
| 