User Defined Menu

Introduction

When using the Website Generator the website comes with a standard menu. It is possible to expand this menu by adding items to it. It is not possible to modify the standard menu items or sub-items.

There are two ways for modifying the menu:

1. A user defined menu containing all user defined items. This part of the menu is displayed next to the standard menu (system 1).
2. A user defined menu where items are added to standard menu and new items are created next to the standard menu (system 2).

Operation

System 1

In the website root there must exist a file CUsermenu.txt which contains the user defined menu. When the index.html is requested by a visitor the file CUsermenu.txt is read and the items in there form the User Defined Menu which is explained below. This menu is dynamically used by the website and NOT generated by CumulusUtils.

System 2

In the utils directory there must be a file CutilsMenu.def in the utils directory. The default contents of this file as delivered in the distribution is :

 Home;
 About;
 Reports;
 Graphs;
 Records;
 Extra;
 Misc;
 Toggle Dashboard;

You recognize the standard menu of CumulusUtils. From version 6.12 the menu runs from left to right (as before it went from right to left). In version 6.12 the user can only change the order of the menu items by changing the place of the item in the file. Future versions will have the possibility to add items to the standard menu, it will never be possible to remove items from the menu. Standard items can only be configured through cumulusutils.ini

Both files for System 1 & 2 are available in the distribution. Both System 1 & 2 can be used at the same time.

Output

There is no output of the user menu, only a visible appearance on the website.

Inifile parameters

There are no inifile parameters involved

Inner working

The website is designed on the basis of the Bootstrap Toolkit. As a result, the menu is also within this toolkit.

Example of CUsermenu.txt

Below is the contents of CUsermenu.txt of HansR. All possibilities are used in that file and you can copy the basic principle replacing the links by your own.

NOTE: Sub-menu within a drop down is not possible.

You can use the following possibilities:

1. Create a direct link with a <a> tag. Use target="_blank" for a new tab or window otherwise your site will be overwritten
2. Loading a site or report of yourself into the Report View Area using the CumulusUtils function LoadUtilsReport()
3. Create a divider between menu items

 <li class='nav-item dropdown'>
  <!-- Just put a link on the UserMenu text                                                  -->
  <!-- a class='nav-link' href='http://google.com'>Google</a                                 -->

  <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
    NL
  </a>
  <ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
    <li class='nav-link' onclick="LoadUtilsReport('Waterstanden.txt');">Waterstanden</li>
    <li class='nav-link' onclick="LoadUtilsReport('TopoNL.txt');">TopoNL</li>
    <li class='nav-link' onclick="LoadUtilsReport('Ahn.txt');">Hoogtekaart</li>
    <li class='nav-link' onclick="LoadUtilsReport('Cropmap.txt');">Crop map</li>
    <!-- a class='nav-link' href="https://topotijdreis.nl" target="_blank">Topo NL</a -->
    <li><a class='nav-link' href="https://waterinfo.rws.nl/#!/kaart/waterhoogte-t-o-v-nap/">Waterstanden</a></li>
    <div class='dropdown-divider'></div>
  </ul>
</li>

<li class='nav-item dropdown'>
  <!-- Just put a link on the UserMenu text                                                  -->
  <!-- a class='nav-link' href='http://google.com'>Google</a                                 -->

  <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
    Maps
  </a>
  <ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
    <li class='nav-link' onclick="LoadUtilsReport('Effis.txt');">European Forest Fire Information System</li>
    <div class='dropdown-divider'></div>
    <!-- li> <a class='nav-link' href="https://www.windy.com/station/pws-f06f5696?53.259,6.932,8" target="_blank">Windy (excl)</a> </li -->
    <li class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</span>
    <li class='nav-link' onclick="LoadUtilsReport('GlobalWinds.txt');">Global Winds</li>
    <li class='nav-link' onclick="LoadUtilsReport('Sat24-infrarood.txt');">Sat24 IR</li>
    <li class='nav-link' onclick="LoadUtilsReport('Sat24-zonwolken.txt');">Sat24 Visual</li>
    <div class='dropdown-divider'></div>
    <li class='nav-link' onclick="LoadUtilsReport('Radar-regen.txt');">Radar-regen</span>
    <li class='nav-link' onclick="LoadUtilsReport('Blitzortnung.txt');">Blitzortnung</span>
    <li class='nav-link' onclick="LoadUtilsReport('MeteoAlarm.txt');">Meteo Alarm</span>
    <div class='dropdown-divider'></div>
    <li><a class='nav-link' href="https://wow.knmi.nl/#1211bb08-6c93-e911-80e7-0003ff59889d" target="_blank">KNMI WOW</a></li>
    <li><a class='nav-link' href="https://www.wunderground.com/dashboard/pws/IWAGEN6" target="_blank">WU iwagen6</a></li>
  </ul>
</li>

User report shown in the Report View Area

Any user report or external website can be shown in the Report View Area by simply loading the User Report in that area with the LoadUtilsReport function with a li-tag as below:

 <li class='nav-link' onclick="LoadUtilsReport('User report name.txt');">Sateliet</li>

URL shown in the Report View Area

The Report View Area can contain reports but maybe you would like to see a website in that area. That can be accomplished by putting that URL in an IFrame text file and to load that IFrame with a call to the LoadUtilsReport function like e.g. for Windy below:

 <li class='nav-link' onclick="LoadUtilsReport('Windy.txt');">Windy</li>

Where Windy.txt is a plain text file containing the following:

 <iframe src="The Embedded URL given by Windy" width="100%" frameborder="0" style="border:0;height:75vh;"></iframe>

The width definition of the iFrame guarantees it won't fall beside the window, the height definition keeps most URLs within the given viewport. Some may get higher which happens often when you are using a tablet. Creating dynamic sizing within the available viewport is however a bit beyond the scope of this exercise as most site work fine like this. Of course you could experiment yourself with the IFrame parameters. Look on the map for examples how users create their menu's, some really do great things!

You need to read this post when wanting to use iFrame.