Weather station scripts - PHP/CSS only Menus

They're free, but use at your own risk

The scripts referenced here are used in the operation of this weather station, and may be freely copied and used to support your station. Please note that you use these scripts at your own risk. No warranty is expressed or implied. I accept no liability for any damages that may ensue from their use.
You will need to configure them for your own particular weather station website.
RSS feed for Scripts Updates A RSS Feed is available to help keep you informed on updates to the scripts.

If you find one or more of the scripts useful to you, please consider making a donation to help offset the routine expenses of operation of this website.
Thanks for your kind support!

A Version History is available -- check back from time to time to see if there are updates to scripts you have downloaded earlier. Announcements of version updates and new scripts are made on and Weather-Watch forums and saratogaWXPHP Twitter account as they become available.

This page was updated Saturday, 08-Dec-2012 5:09 PM

CSS-based Horizontal drop-down menu script

This PHP script reads a local XML file containing the menu item definitions and generates the HTML/CSS to make a JavaScript-free/CSS-only horizontal drop-down/fly-out menu set for your website.

The script is based on Stu Nicholls' CSS menu design. Stu has graciously given his permission to redistribute his CSS and XHTML as long as his copyright notice remains intact inside the generated CSS (which is included in the PHP generated CSS) and it is distributed for free (which it is). If you find the menu system useful for your website, please consider making a donation to CSSPlay to support Stu's development efforts with CSS.

The menu has three components, a locally created XML definition file, a helper transparent image .gif file, and a PHP script to generate the CSS and XHTML for the menu itself.

XML Menu definition file

The menu definition XML file looks like this:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!-- menu control file for dropdown-menu.php program -->
<!-- Ken True - available at -->
<!-- NOTE: this file must be correct XML with all tag items properly closed  -->
<!-- Structure of file is

     <item caption="Main 1" link="main1.php" title="leftmost menu item"/>
	 <item caption="Main 2" title="Main menu number 2">
	    <item caption="Drop down 1" link="dropdown1.php"/>
	    <item caption="Drop down 2" link="dropdown2.php">
		   <item caption="Flyout 1" link="flyout1.php"/>
		   <item caption="Flyout 2" link="flyout2.php"/>
		   <item caption="Flyout 3" link="flyout3.php">
		     <item caption"Fourth Level Flyout 1" link"level4a.php"/>
		     <item caption"Fourth Level Flyout 2" link"level4b.php"/>
		     <item caption"Fourth Level Flyout 3" link"level4c.php"/>
	    <item caption="Drop down 3" link="dropdown3.php"/>
 Failure to follow this structure or nest more than 3 sublevels
 may result in unexpected (and incorrect) results .. the top/sub1/sub2/sub3 four
 level menu should allow for highly complex websites.
	<item caption="Home" link="/index.php" title="Home Page for"/>
	<item caption="Live" 
	   title="Realtime display of weather conditions, webcam, NOAA Radio">
		<item caption="Weather-Display Live" link="/WD-Live.php"/>
		<item caption="Wunderground Live" link="/rapid-fire.php"/>
		<item caption="Saratoga NetCam" link="/netcam.php"/>
		<item caption="NOAA Weather Radio" link="/radio.php"/>
	<item caption="Radar" link="/radar.php" 
	   title="GRLevel3 and Wunderground Radar from NWS"/>
	<item caption="Lightning" link="/lightning.php" 
	   title="Boltek/NexStorm Lightning maps">
		<item caption="NexStorm, WASP-2" link="/lightning.php" />
		<item caption="StormVue display (JAVA)" link="/stormvue.php"
		   title="Note: StormVue requires Java be enabled for display"/>
	<item caption="Mesomap" title="Mesomaps, SF Bay, Southwest, Marine Buoys">
		<item caption="SF Bay - Mesomap Live" link="/MML.php"/>
		<item caption="Southwestern Weather Network" link="/SWN.php"/>
		<item caption="Nearby Buoys" link="/buoys.php"/>
	<item caption="Tropical" link="/tropical.php" 
	title="Tropical conditions in Eastern Pacific and Atlantic/Gulf of Mexico/Caribbean"/>
	<item caption="Almanac" 
	   title="Forecasts, UV Index, Trends, Tides, Sun/Moon, Climate">
		<item caption="NWS Forecast details" link="/forecast-new.php"/>
		<item caption="WXSIM Forecast details" link="/WXSIM-forecast.php"/>
		<item caption="UV Index" link="/UV-index.php"/>
		<item caption="Earthquake activity" link="/earthquake.php"/>
		<item caption="Weather Trends" link="/trends.php"/>
		<item caption="So. SF Bay Tides" link="/tides-SF-bay.php"/>
		<item caption="Sun/Moon Almanac" link="/sunmoon.php"/>
		<item caption="NOAA Image of the day" link="/NOAA-IOD.php"/>
		<item caption="Wunderground Weather Maps" link="/maps.php"/>
		<item caption="Station Graphs" link="/graphs.php"/>
		<item caption="NOAA Rpts" link="/NOAA-reports.php"/>
	<item caption="Stickers" link="/sticker.php" 
	   title="Get a free weather graphic for your website"/>
	<item caption="Scripts" link="/scripts.php" title="Free PHP/Perl scripts">
		<item caption="AJAX Scripts">
			<item caption="AJAX Weather-Display Carterlake templates" 
			<item caption="AJAX Weather-Display with PHP" 
			<item caption="AJAX VWS / Weather Flash" 
			<item caption="AJAX VWS / data.csv" 
		<item caption="Forecasts">
  			<item caption="NWS Forecast with icons" 
			<item caption="Envt Canada Forecast/Advisory (English/French)"
  			<item caption="WXSIM Forecast with icons - multi-lingual" 
  			<item caption="WXSIM Forecast with icons RSS 2.0 feed multi-lingual"
			<item caption="NWS and WU forecast (perl)" 
		<item caption="Advisories">
			<item caption="NOAA RSS Advisory" link="/scripts-rss.php#NOAARSS"/>
			<item caption="Carterlake NOAA testadvisory.php" 
			<item caption="NHC RSS advisory" link="/scripts-rss.php#NHCRSS"/>
			<item caption="SPC RSS mesoscale disc." 
		<item caption="Radar">
			<item caption="Envt Canada Radar (English/French)" 
		<item caption="Mesomap">
			<item caption="NDBC Buoy data mesomap " 
		<item caption="Climate/Geology">
			<item caption="NOAA.txt display" 
			<item caption="USGS earthquakes" 
		<item caption="Image handlers">
			<item caption="Resize/Cache NexStorm, WASP2" 
			<item caption="Resize/Cache NOAA IOD" 
			<item caption="Wind Direction Icons" 
		<item caption="References for programmers" 
		<item caption="RSS Feed for Script changes" 
		<item caption="PHP Utility">
			<item caption="Got PHP? Test it!" 
			<item caption="PHP Weather-Display Tags" 
			<item caption="PHP for CSS dropdown menus" 
	<item caption="About" title="About us, website map">
	  <item caption="About" 
	  <item caption="Website Map" link="/sitemap.php"/>

Getting correct XML syntax is very important -- the XML parser will complain (and not generate the desired code) if the XML statements aren't terminated correctly. The XML file MUST start with the line:
<?xml version="1.0" encoding="iso-8859-1" ?> and be followed by <menu> as the first non-comment statement, and the last line in the file must be </menu>

There are only two XML tags necessary:
The <menu></menu> pair must surround the <item></item> tag set.
The <item> tags generate the menu links and there are three attributes available for each item tag:

caption="[link text to display]" (required)
The caption="" attribute is required and specifies the text to display in the menu item. I recommend you keep it to one word for top level menus. Submenus may contain more words and will text-wrap if needed.
link="[page url address]" (optional)
The link="" attribute is optional for top level and submenu group items, but should specify the page to link to if the menu item is selected by the mouse. The (relative) URL of the page to link to should be used with this tag. Relative (./page.php) or absolute (/subdir/page.php) addresses may be used. If you have multi-level sites (with pages in subdirectories, using absolute addresses here is recommended. Any specification acceptable to the src="..." attribute of an <a> tag is ok inside the link="" attribute.. so you could have a link="" as your link.
title="[mouseover tooltip text]" (optional)
The title="" attribute is optional. If used, the text will be displayed as a tooltip when the cursor is placed over the caption item. This may be useful to present additional information to the visitor, particularly for one-word top level menu items. It may be optionally used with any menu item, but should be used sparingly as the tooltip will appear and may temporarily mask lower menu items.
target="_blank" (optional)
The target="" attribute is optional and works the same way as target="" attribute does in the HTML <a target="..."> tag does. If target="_blank" is used, then the link will open in a new browser window or tab.
This attribute is ignored if a link="..." attribute is not present.
img="./imagedir/image.gif" (optional)
This attribute acts the same as the src="..." attribute in an <img src="..."/> HTML statement.
Use it to include a small image (10x10 or 14x14px) in the menu. Placement in the text (from the caption='...') defaults to the left of the caption. Change it to the right side (end) of the caption by using align="right" attribute.
align="right|left" (optional)
This attribute specifies where the image (from the img="..." attribute) is placed in the generated link.
align="left" places the image in front of the caption="..." text.
align="right" is the default and places the image after the caption="..." text.

Note: the target=, img=, and align= attributes are available in dropdown-menu.php V1.02 released 24-Jul-2010.

The order of the attributes in the <item> statement is not important. By convention, I used caption, link, title just for my readibility of the XML file. What is important is that the <item> needs to be closed, either by:
<item caption="..." link="..." title="..."/> [the trailing '/>' is a self close to the item tag] or by
<item caption="..." link="..." title="..."> ... </item> [the </item> closes a <item> tag]

The <item> tags can be nested up to 4 levels deep. The topmost <item> (the ones not enclosed by other <item> tags) are the basic selectors for the menu. The second, third and fourth level <item> are in dropdown and fly-out menus.

To create a submenu, simply enclose one or more <item .../> tags within a <item ...> </item> pair and a submenu will be created. See the example XML for more information. It is recommended that you use indent to help you visually inspect <item> nesting .. it is not required by the XML parser, but it sure makes it easier to find errors. Whitespace (including new-lines) is ignored in all areas EXCEPT within quoted strings.
XML rules require you to use &amp; for &, &lt; for < , &gt; for > and &quot; for " within the double-quoted strings.

Settings for dropdown-menu.php

// ---------- settings ------------------------------
$MENUdef = './dropdown-menu.xml'; // (relative) file location of XML menu definition file
$MENUimageDir = '/images/';       // (relative) URL location of images dir (with trailing '/')
// change color settings if you like for the CSS file
 $TopMenuBkgnd		=	'#0033ff';  // overall background field of top menu 
 // match above color to background of enclosing masthead area on website
 // first level menu (top)
 $TopMenuTextColor 	=   '#FFFFFF';  // text color - top menu
 $TopMenuTextBkgnd  =   '#0066FF';  // bkgnd color - top menu
 $TopMenuBkgrndHover=   '#d4d8bd';  // bkgnd color - top menu - hover
 $TopMenuBorder     =   '#E0E0E0';  // color of 1px box around top menu buttons
 // drop-down submenus
 $SubMenuTextColor  =   '#000000';  // text color - sub menu(s)
 $SubMenuTextHover  =   '#0000FF';  // text color - sub menu(s) - hover
 $SubMenuBkgrnd     =   '#d4d8bd';  // bkgnd color - sub menu
 $SubMenuBkgrnd2    =   '#d4d8bd';  // bkgnd color - sub menu level 2
 $SubMenuBkgrnd3    =   '#b4be9c';  // bkgnd color - sub menu level 3
 $SubMenuBkgrnd4    =   '#d4d8bd';  // bkgnd color - sub menu level 4
 $SubMenuBkgrndHover=   '#d4d8bd';  // bkgnd color - sub menu - hover
 $SubMenuBkgrndHover2=  '#b4be9c';  // bkgnd color - sub menu level 2 - hover
 $SubMenuBkgrndHover3=  '#c4ceac';  // bkgnd color - sub menu level 3 - hover
 $SubMenuBkgrndHover4=  '#b4be9c';  // bkgnd color - sub menu level 4 - hover
// ---------- end settings --------------------------

The only required settings are for:
$MENUdef which must be set to the (relative) file location of the XML menu definition file.
The default is './dropdown-menu.xml'.
$MENUimageDir should be set to the (relative) URL directory where the transp.gif file is loaded.
The (default is '/images/' (be sure to include the trailing '/' in the directory as shown).
The Color settings should be adjusted to meet your website color requirements.

The dropdown-menu.php script has two optional arguments for the URL:

Controls whether a <div class="dropdownmenu"></div> is emitted around the menu. Default is n (no)..
This can also be controlled by setting the $genDiv variable before the script is included like this:
<?php $genDiv=true; include("dropdown-menu.php"); ?>.
If present, the script will output ONLY the CSS for the page.
If present, the script will output debugging information as HTML comments in the output stream.

There are two program switches that may be used to control generation/display with PHP code before you
<?php include("dropdown-menu.php"); ?> on your webpage::

$PrintDropdownMenu=true; (default)
This switch controls whether the script prints any text or not.
If $PrintDropdownMenu = false; then all printing is suppressed. See below for usage example.
This switch controls whether the script puts a <div class="dropdownmenu"></div> around the $DropdownMenuText or not. The default is false (no <div> included). This option should NOT be selected on a page you wish to display a sitemap (see below).

Installation for PHP websites

  1. Download dropdown-menu package on your offline copy of your website.
  2. Update the dropdown-menu.xml file with the navigation structure for your website.
  3. Customize the settings in dropdown-menu.php as needed.
  4. Upload the dropdown-menu.php, dropdown-menu.xml and the images/* directory to your website
  5. Edit your page to insert
       <?php $PrintDropdownMenu = false; include("dropdown-menu.php"); print $DropdownCSS; ?>
    in the <head> </head> area of your page.
  6. Edit your page to insert
      <div class="dropdownmenu"><?php print $DropdownMenuText; ?></div>
    on your page where you'd like the menu to appear, then save and upload the page to your website.
  7. Repeat (5) and (6) for each page to use the menu system.

You can also use the script to create a website map. On a page that uses the $PrintDropdownMenu=false; (see above), then just <?php print $DropdownMenuText; ?> where you'd like the menu tree to be printed. Do this without a surrounding <div class="dropdownmenu"></div> and the links will print as a series of nested unformatted lists. You can see this in action on my sitemap page.

Installation for .htm/.html/.shtml websites

If you want to stick to .htm/.html for your normal website, and you have PHP available, you can use the script to generate a CSS and a HTML that you can include (static or dynamic) into your existing site. Follow these steps:

  1. Download dropdown-menu package on your offline copy of your website.
  2. Update the dropdown-menu.xml file with the navigation structure for your website.
  3. Customize the settings in dropdown-menu.php as needed.
  4. Upload the dropdown-menu.php, dropdown-menu.xml and the images/* directory to your website
  5. Load in your browser
  6. Save the page locally as wxmenu.css and edit it to remove:

       <!-- begin dropdown-menu.php CSS definition -->
       <style type="text/css">

    at the top of the file, and remove from the bottom of the file:

       <!--[if lte IE 6]>
       <style type="text/css">
       .dropdownmenu ul ul {left:-1px; margin-left:-1px;}
       .dropdownmenu ul ul ul.left {margin-left:1px;}
        <!-- end of dropdown-menu.php CSS definition -->

    then save and upload the wxmenu.css file to your website.
  7. Load in your browser
  8. Save the page locally as wxmenu.html and upload it to your website
  9. Edit your website page to insert

       <style type="text/css" src="wxmenu.css"></style>
       <!--[if lte IE 6]>
       <style type="text/css">
       .dropdownmenu ul ul {left:-1px; margin-left:-1px;}
       .dropdownmenu ul ul ul.left {margin-left:1px;}

    in the <head></head> section
  10. Edit your website page to include

       <div class="dropdownmenu">[insert contents of wxmenu.html]</div>

    where you'd like the menu to appear.  
  11. Repeat steps (9) and (10) for each page in your website.

If you have Server Side Includes (SSI) available, the step (10) can be replaced with the following SSI directive:
<div class="dropdownmenu"><!--#include virtual="wxmenu.html" --></div>

This dropdown menu system has been tested and works with:
Internet Explorer 5.5, 6 and 7, Firefox 1.5, 2.0, Opera 9, Safari for Windows 3.0.3, Netscape 8.1.2.

The following browsers are known to have problems (popups at left side of the screen):
Netscape Navigator 7.1 Mozilla 1.3, Opera 7

CSS horizontal drop-down menu script package (V1.03 -08-Dec-2012) download [ see version history ]

Issues with other scripts/applets

This menu system is DHTML-based. Some applets and scripts are known to have problems with display of the dropdown menu shown behind certain objects on the screen.

Adobe/Macromedia Flash Player
Flash has the annoying habit of trying to be 'uppermost' in the display on your browser. The way to get it to play nice (and allow DHTML to display over the top of the Flash Player) is to add
  <param name="wmode" value="transparent" /> or
  <param name="wmode" value="opaque" />
to the <object> invoking the Flash Player. If you're using the swfobject.js to launch the Flash Player, then include so.addParam("wmode", "transparent"); before the so.write("flashcontent"); in the JavaScript on the page. (see example at WD-Live.php -- view source)
Java Applet (not JavaScript)
Java Applets have a similar issue -- they want to be uppermost in the display. Unfortunately, there is no know fix for this issue. I included a 'caution' on my StormVue.php page to this effect.
In Version 1.00, the buoys.php page (buoy-data.php) had the menu appear behind the buoy map.
The Southwestern Weather Network conditions map also exhibits the same behavior.
Note: this behavior is fixed in Version 1.01 of DropownMenu.php by a change in the generated CSS.