W3 custom menu html code generator

Change the order of the menu items by drag'n'drop on a link on the nav bar above
In the case of a drop-down, drag one of its links (all will be moved)

Use this table to edit / create / remove menu items (*title means new window)

Ordinary (single) links
 PC    ☰      Title:                               url:
       
       
       
       
       
       
       
       
       
       
 PC    ☰      Title:                               url:                (... single link cont.)
       
       
       
       
       
       
       
       
       
       
Drop-down (multiple) links
 PC    ☰      Title:                             PC    ☰   Title:                              url          (... drop down links)
            
      
      
      
      
      
            
      
      
      
      
      
 PC    ☰      Title:                             PC    ☰   Title:                              url          (... drop down links)
            
      
      
      
      
      
            
      
      
      
      
      
 PC    ☰      Title:                             PC    ☰   Title:                              url          (... drop down links)
            
      
      
      
      
      
            
      
      
      
      
      

Page updated .

'Narrow' Menu ☰

  
<!-- Main Menu -->
<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
<a href= "index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>
<a href= "gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>
<a href= "today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>
<a href= "yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>
<a href= "thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>
<a href= "thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>
<div class="w3-dropdown-hover">
	<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Extremes</button>
	<div class="w3-dropdown-content w3-bar-block w3-theme">
		<a href="records.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">All Time</a>
		<a href="monthly.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Monthly</a>
	</div>
</div>
<div class="w3-dropdown-hover">
	<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">
		<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>
		<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>
		<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>
   	</div>
</div>
<div class="w3-dropdown-hover">
	<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Historic</button>
	<div class="w3-dropdown-content w3-bar-block w3-theme">
		<a href="????" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Data Summary</a>
		<a href="NOAA-reports.php" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">NOAA Reports</a>
	</div>
</div>
<div class="w3-dropdown-hover">
	<button class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small">Other Sites</button>
	<div class="w3-dropdown-content w3-bar-block w3-theme">
		<a href="https://cumulus.hosiene.co.uk" target= "_blank" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Cumulus Forum</a>
		<a href="???" target= "_blank" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Some other link</a>
	</div>
</div>
<a href= "mywebcam.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Webcam</a>
<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onclick="toggleMenu('Main_Menu_Mobile')">&#9776;</button>
</div>

<!-- 'narrow' menu -->
<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large"> 
<a href= "index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Now</a>
<a href= "gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Gauges</a>
<a href= "today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Today</a>
<a href= "yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Yesterday</a>
<a href= "thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">This Month</a>
<a href= "thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">This Year</a>
<a href= "record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Records</a>
<a href= "monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Monthly Records</a>
<div style= "border-bottom: 1px solid red;">
	<button class="w3-btn   at-slim" style="cursor: default; border-bottom: 1px solid lightblue;">Charts ...</button>
	<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">... Trends</a>
	<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">... Select-a-graph</a>
	<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">... Historic</a>
</div>
<a href= "https://cumulus.hosiene.co.uk" target= "_blank" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Forum</a>
<a href= "mywebcam.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim" style= "border-bottom: 1px solid red;">Webcam</a>

</div>