Editing Navigation Links

Our Template Instructions

Drop-Down Navigation Menu:

The navigation menu can hold a main topic and one sub-topic level. The sub-topic level will expand on mouseover and will contract when you move the mouse off the menu item.

drop-down menuYou can delete main topics (and any associated sub-topics), add new ones, and change the text and links on the existing menu. You will edit the drop-down menu on the .dwt page templates. Note that the subtopic level will not be visible, so you will need to edit the menu in code view. If you look at the coding, it should be relatively easy to make your changes.

For a main topic (top link) only, your code will look something like this:

html
  1. <li><a href="../index.html">Home</a></li>

For a main topic that contains sub-topics, your code will look something like this:

html
  1. <li><a href="../page.html">Main Topic</a>
  2.    <ul>
  3.      <li><a href="../page.html">Sub-Topic 1</a></li>
  4.      <li><a href="../page.html">Sub-Topic 2</a></li>
  5.      <li><a href="../page.html">Sub-Topic 3</a></li>
  6.      <li><a href="../page.html">Sub-Topic 4</a></li>
  7.    </ul>
  8.  </li>

Once you have your menu completed on one .dwt page, copy the entire menu and paste it into any additional .dwt page templates you will be using. Save your pages and allow the changes to update on the .html pages. Save and you're done.

html
  1. <nav id="mainnav">
  2. copy all coding that appears between the opening and closing nav tags
  3. </nav>

If you are using Expression Web, you could also do this in design view. Click in the navigation area on the .dwt template, then look on the quick tag selector bar. Highlight the selector and you will see that the menu is now highlighted. Copy (Control + C) and open any other .dwt templates. Once again highlight the selector in the quick tag selector bar and paste (Control + V) over the old navigation group with your new one.

Font sizes and colors, background colors, sub-topic block width, margins, paddings, etc. are all controlled in the default.css page.

But What If

1I need room for more top-level links:

If the navigation bar contains top-level links that are of varying widths (the width of the link text), there may be enough room to just add another link to the coding. If it will not fit, then you will have to experiment with the CSS file to either reduce the font size and/or adjust margins and paddings:

CSS
  1. #nav li {
  2.    display: inline-block;
  3.    position: relative;
  4.    z-index: 500;
  5.    margin: 0 -2px 0 -3px; /*if negative right and left margins, you cannot change these numbers*/
  6.    ...
  7. }
  8. /* this is the parent menu */
  9. #nav li a {
  10.    display: block;
  11.    padding: 8px 14px 9px 14px; /*reduce right and left padding amounts*/
  12.    ...
  13. }
  14. #nav li a:hover {
  15.    font-weight: normal;
  16.    padding: 8px 14px 9px 14px; /*reduce right and left padding amounts to match above*/
  17.    ...
  18. }

Some menus have the top level link width set in the CSS file. You can adjust this width as needed for your site.

CSS
  1. #nav li {
  2. ...
  3. width: 180px; /* you can increase or decrease width */
  4. }

2I have a lot of sub-menu links:

The drop-down portion of a top-level link will expand to hold the sub-menu links. In theory, this is great; in practice, there are limits. Add too many links and the menu will expand and drop below the visible screen area. Moving the mouse to scroll the page will cause the menu to collapse.

Whether you are trying to link to product pages, tutorials (like this site), or have a list of members, you want your visitors to find the information they need. A long display of link choices can be difficult to read. You really don't have to display everything in your main menu.

You have probably heard the old saying that 20% of your products make up 80% of your sales. So if you have a lot of links in one section, consider placing the most popular 15 or so. Then add a last link that says "View More". Link the view more to a site map or similar page. Large sites always benefit from having a site map because you want visitors to get past your home page.

Give it a try. You will probably find your visitors will stay longer if they are not overwhelmed with a vast number of menu choices.