Menus For Use In Microsoft Expression Web

----- NEEDS REWORK SINCE OVERALL SITE CHANGE -----

• Row Menus
  • Simple
  • Two-Level
• Drop-Down
• Column Menus
  • Simple
  • Fly-Right [TBD]
  • Expandable Tree [TBD]
• Row Main + Column Sub-Menu

TO DOWNLOAD: See Download All link in Page Templates.

TBD: Notes below here are an incomplete explanation of what to do to use these menus in your own website.

Each menu is kept in a separate "include file", so that it can be used in multiple pages, yet edited in one place.

Alternately, you might incorporate the menu into a "Dynamic Web Template", which describes all the features of a page that you wish to reuse in multiple pages.

[TBD - GUI solution] Switch to a different menu structure using Code view -- simply copy the "include" line(s) from the corresponding menu sample.

 Indicating visually which menu item matches the page we are on.  The current page is indicated by switching the colors of that menu item.  To do this:

• The current page must be identified.  See "To add a new page to your menu".
• Each menu item must have a class name that is the same as the class name of its corresponding page.
• Style ".currentMainMenuItem" must somehow be applied to that corresponding menu item.  This is done by a piece of javascript code, "initmenu()".  (Which is called by my standard "doit()" script).
• NOTE: On browsers with scripting disabled, this will not occur, so the menu will not show which page we are on.  However, the menu will still function properly as a menu.

To add a new page to your menu.  After creating a new page from your DWT, you must:

• Identify the current page (This is done by adding a dummy style to <div#navigation>:  Open your DWT.  Click inside your menu.  In "breadcrumbs", click on "<div#navigation>" (sometimes is <td#navigation>).  In "Tag Properties" pane, change Attributes / class to any value starting with "menu", such as "menu7" or "menufoo" or "menu7-2" or "menu-foo".  Each page must have its own unique class value.
• NOTE: if there is already some class on that div, such as "narrowColumn", then add a blank space and then the page name; e.g. "narrowColumn menu5-3".
• Add the new menu item wherever you want it (The main menu is in "layout/main-menu.htm".  The sub-menus are in "layout/sub-menus.htm".  The new menu item must be a hyperlink.):  Click at end of previous menu item; hit Enter key; right-click / "Hyperlink".  Fill in "Text to display" and "Address".
• Set the class of this new menu item to match your page class (set above in #navigation):  Click on the menu item.  In "breadcrumbs", click on "<li>" (or it may show a menu class, e.g. "<li.menu5>").  In "Tag Properties" pane, change Attributes / class to match the class value you gave to the page's #navigation, such as "menu7", etc.

To add a new submenu.  If you have a two-level menu structure, and are adding a new section, then you will likely want a new submenu for that section.

• Open "layout/sub-menus.htm".  [TBD GUI solution].  Switch to Code view.  Select the lines for the currently last submenu (include the comment line, and <div class="subMenu"> thru </div>).  Copy and paste.  Delete all the <li>s except the first one.  Change the <ul> and <li> class names so that they are different.  For example, change <ul> from "menu5" to "menu6", and change the <li> from "menu5-1" to "menu6-1".
• Now follow instructions "To add a new page to your menu", using that new class; e.g. "menu6-1".  Use the <li> you already created.
• Now add the new section to your main-menu:  Open "layout/main-menu.htm".  This is just like "To add a new page to your menu", except that the class identifies the whole subsection, so use the class from your <ul>, e.g. "menu6" [rather than "menu6-1"].

NOTE: I am working on an add-in to EW to simplify this process.