Making a Vertical Nav Bar Using Css

Making a Vertical Nav Bar Using Css

DW4.3

NavigationBars using CSS

Vertical Navigation Bars

  1. Enter your links in page and separate them with a paragraph break. Use the # character to create null links for the purposes of this tutorial.
  1. High-light the links and make them into an unordered (bulleted) list.
  1. Next create the following styles in your style sheet:

Selector Type / Name / Properties and Values
Advanced / #mainnav / BoxMargin: All 0
Padding: All 0
Advanced / #mainnav li / List > Type: None
Advanced / #mainnav li a:link, #mainnav li a:visited, #mainnav li a:active / Type > Font Size, Family & Colour
Decoration > None
Background > Background Colour
Block > Display > Block
Box > Width: 120 pixels
Height: 15 pixels
Padding: All 5 pixels
Margin: All 0
BorderBottom only, 1 pixel colour as background of page
Advanced / #mainnav li a:hover, #mainnav li a.current:link, #mainnav li a.current:visited / Type > Font Colour
Background > Background Colour
  1. To give your unordered list the ID of mainnav, right-click on the <ul> tag in the Tag Inspector and select Set ID > mainnav

Horizontal Navigation Bar

Repeat steps 1-4 as above and add the following styles to #mainnavli

  • Block > Display:Inline
  • Block > Text Align: Centre
  • Box > Float:Left

and in #mainnav li a:link, #mainnav li a:visited, #mainnav li a:active

  • Border > Edit Border for ‘Bottom’ to ‘Right’

Combining Classes with Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

  • link is for an unvisited link, (a:link).
  • visited is for a link to a page that has already been visited, (a:visited).
  • active is for a link when it is gains focus (for example, when it is clicked on), (a:active).
  • hover is for a link when the cursor is held over it, (a:hover).

If we create the following CSS styles we can then apply the class of .redbold to links in our page to inherit the following values:

a.redbold:link {font-weight: bold; color: #CC0000; }

a.redbold:visited { font-weight: bold; color: #6666CC; }

a.redbold:active { font-weight: bold; color: #FFCC33; }

a.redbold:hover { font-weight: bold; color: #000000; }

Method:

  1. Enter the above styles into your style sheet either manually or through the Dreamweaver CSS editor (with an advanced selector).
  2. Click inside an unstyled link in your page.
  3. Right-click on the <a> tag in the Tag Inspector and set the Class to .redbold.

Important: Link styles must be ordered as link, visited, active and then hover otherwise they fail to work correctly.

Top View