Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

The DHTML in the Nav Menu

The Empty Menu Row Is Visible by Default

First, create some basic table infrastructure in which to work. The table row that will hold the menu isn't very inspiring initially. The key information is the ID attribute ActualCell0, which will be used in the JavaScript function DisplayMenu().

<Table>
<TR ID="ActualRow0" width="800" >
<TD ID="ActualCell0">
</TD>
</TR>

The Hidden Row "Working Area"

The image "working area" row is pre-populated with all possible images/image maps but is hidden:

<STYLE>#menurow{visibility:hidden; }</STYLE>
   :
   :
<!----Hidden Row working area for images and maps ----------------->
 <TR id="menuRow">
  <TD id="menuCol" height="40" valign="baseline" bgcolor="#CCCCCC">

<!--- begin map and image for Menu1 -------------->
 <map name="FPMap1">
  <area href="./HomepageContent/Main1Sub1Content.htm" target="main1"
        shape="rect" coords="6, 8, 44, 23" >
  <area href="./HomepageContent/Main1Sub2.htm" target="main1"
        shape="rect" coords="6, 8, 44, 23" >
   :
  </map>
 <img NAME='Menu1' border='0' src='images/home.gif'
       usemap='#FPMap1' width='800' height='45'>
<!--- End of Menu1 ---->
<!--- begin map and image for Menu2 -------------->
  <map name="FPMap2">
   :

The above code snippet shows a style tag that hides all HTML elements with an id of "menuRow". In practice, this is the second row in the table. It holds all of the <img> tags and their associated image maps. Though they're hidden from the browser user, they're visible to the administrator using FrontPage 2000 as a rather redundant-looking stack of menus.

This visibility is key to providing easy maintenance using the Define Hotspots feature of FrontPage 2000.

  • + Share This
  • 🔖 Save To Your Account