Navigation Menu - Creating A Navigation Menu

Whether you use FrontPage Includes, Expression Web Design Time Includes, or SSI (Server Side Includes), the process is the same. Using my genealogy site as an example.

Preparation

Do some planning BEFORE you start. Using paper and pencil draw out a plan for your site navigation. Decide on your main categories. Decide which sections of your site may need a sub menu. Remember:

• file names should be short and all lowercase letters
• don't use spaces in files names, use a hyphen or underscore to separate words
• Use an unordered list for your menus and style them using an external style sheet

Creating the Menus

Using my genealogy site as an example, there are five main sections - the four family lines and a section for tutorials and articles relating to genealogy. My main menu will include the 5 main categories plus a couple of others. I want to expand each of the surname sections as well as the tutorials section so I will need 6 include menu pages - the main menu and 5 named after the various sections of the site. I put each of the include menus into a folder called _includes.  Note the underscore

Screenshot

REPEAT: I am actually creating six completely separate menu pages - one for the main menu include and one for each of the family lines that will contain the main categories and an expanded sub-menu for the particular family line.

My main categories will be:

Home
Jewell Family
Geary/Gary Family
Tucker Family
Little Family
Tutorials
 

These categories will appear on every one of the menus. I now have 6 include pages in the includes folder called:

left-menu-htm
gary-menu.htm
jewel-menu.htm
little-menu.htm
tucker-menu.htm
tutorials-menu.htm

On the left-menu.htm page the menu I would list the following categories. Each one would be linked using an absolute link - complete url http://www.family-genealogy-online.com/ NO file name as part of the url (index.htm)

Home
About Us
Jewell Family
Geary/Gary Family
Tucker Family
Little Family
Tutorials
 

Screenshot of left-menu.htm

Each of the family lines has it's own folder with pages within so I want an expanded menu for each of those. Each of the expanded menus will include the Main menu plus the expanded menu for that section. So my jewell-menu.htm  would include:

Home
About Us
Jewell Family
History
  Descendant's Chart
  Family Sketches
  Family Bibles
  Photo Albums
  Cemeteries
  Graham Family
  Hall Family
  Vanover Family
Geary/Gary Family
Tucker Family
Little Family
Tutorials
 

Screenshot of jewel-navigation.htm

I would follow the same format for each of the sections I want to expand as part of the navigation menu. Each of the menus on the genealogy site is an unordered list which is styled using css to make the menu selections look like buttons.

One of the expanded menus before it is inserted into the page and before it is styled using css.
The same menu after it has been inserted into the page and styled using css. If you view the source of the menu, you will see the styles for the menu.
Scroll down to the section:

/* *****************************************************
Navigation Bar - Left hand side 
**************************************************** */

If you are using FrontPage 2003 or Expression Web, you can make the job even easier by using a dynamic web template (dwt) with your menu include as an editable region. If the menu include is not editable, you will NOT be able to edit that region to change the menu for each section.

Need help? Feel free to send me an e-mail.