Setup Guide V1 (last updated January 4th, 2007)

Designed for the Focus Series Templates and Modules

Vertical menu (body) basic tutorials

Vertical menu buttons located in the body section of the web page, usually aligned to the left of the page.

The vertical menu bar, is actually an 'un-ordered' bullet list, that uses CSS (instructions from a Cascading Style Sheet) which gives it a great look and interactive functionality. This is a VERY search friendly menu bar that does not use any JavaScript. This menu bar replaces the older FrontPage Navigation buttons, that did rely upon JavaScript. As with all the navigation elements in your web site, these buttons are embedded into your web page using an 'include' page component. Edit the include page, and all pages using the Vertical Menu Bar will be updated.

**VERY IMPORTANT NOTE** as you add new 'links' to the vertical menu bar, the appearance of the bar will not take a completed form, until you have HYPERLINKED your new button to a page or website. You MUST complete the steps listed below, or your menu bar will appear to be separated by a line of text, when in fact, that text is a button that has not been HYPERLINKED. Go through the steps, and all will be good in the end.

Add a button

** in many cases, you'll want add a new button in between two existing buttons, this is the example we'll use**

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the 'vertical_menu_body.' page

  • place your cursor at the end of an existing line of button text

  • press enter on your keyboard to create a new 'blank' space

  • in the blank space type a name for your new button

  • select the text for the new button (all text)

  • right click, selecting HYPERLINK properties

  • locate the page you will be linking this button to using the browse window, or type the name into the 'Address' box

  • click OK

You will see your new button added to the menu bar, placed UNDER the button where you first placed your cursor. Seeing this in action, you can now add more buttons and create a new order for your buttons.

**NOTE** you can modify the appearance of the text for the menu buttons directly on the include page, but we recommend editing the style sheet if you want to do this. More information can be found in the Case Study Video.

Remove a button

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the ''vertical_menu_body.' page

  • select the button name with your cursor

  • press backspace on your keyboard TWICE

Edit button name

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the ''vertical_menu_body.' page

  • double click on the text on the button to activate text edit mode

  • type in the new name for the button

Edit button hyperlink

  • open your web site

  • open the 'includes' folder - [FP] 'Library' folder - [DW]

  • open the ''vertical_menu_body.' page

  • right click on a text on the button

  • select Hyperlink Properties

  • browse to the page you will be linking to and click to select this page as the new hyperlink

  • or - type the name of the page into the 'Address' text field

  • click OK once a new page has been selected
 

Overview | Basic | Intermediate | Advanced