Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

CSS rollovers based on a Theme

Navigation Bar using images from a theme, with CSS image rollovers


Combining a Theme with CSS Rollovers

There are occasions when you wish to use FrontPage themed navigation but cannot use the FrontPage navigation components. This page describes how to combine your own navigation with the front page navigation buttons.

For this exercise a horizontal navigation bar will be constructed. The finished bar is near the bottom of this page.

Get the images:

You will need images for Links, Hovered links, Pressed buttons - that is buttons for the current page.

Apply a theme to a page. Then look inside the theme folder for the blank buttons. Button images are usually named with an indication of the theme name plus a suffix indicating which button it is. Using the Blocks theme, and horizontal buttons the names are:

Link bhbtnne.gif
Hover bhbtnhe.gif
Active bhbtnse.gif

Write the navigation bar.

Use an unordered list of links for the nav. bar. This will be easy to edit in future and can be easily styled with CSS. If you wish to use dropdown or flyout menus, then nested unordered lists not only form the basis for such a menu, but also can be used for a site map or navigation view.

Place the nav bar in a <div> so it can be styled independently from other links in the page. The code becomes:

<div id="nav">
  <ul>
    <li><a href="#" id="home1">Home</a></li>
    <li><a href="#" id="page1">Page 1</a></li>
    <li><a href="#" id="page2">Page 2</a></li>
    <li><a href="#" id="page3">Page 3</a></li>
  </ul>
<br />
</div>

The id="..." is used to allow the display to be changed on a page by page basis - the current page can display a different image, for example.

Add the CSS to the page

The CSS should ideally be placed in an external .css file. This enables the same code to be shared by every page in the web, thus simplifying amendments. Similarly, the menu itself can be placed in a file that is included in every page, or placed in a Dynamic Web Template that is attached to every page.

The CSS removes the bullets, makes the list items display horizontally, and adds the image rollover effect. This is placed in the <head> section of the page.

<style type="text/css">
#navigate {margin: 0 auto;} /* sets the top and bottom margin to 0, and centres the navigation bar in its container (usually the page width) */
#navigate br {clear: both; font-size: 0; line-height: 0;}  /* This clears the floats used to make the menu items line up horizontally.*/
#navigate ul li {width: 140px; height:50px; float: left;}  /* sets the size
#navigate a {
  display: block; /* Make the link occupy all the space */
  padding: 15px 0 0 50px; /* Start the link text at the right place relative to the graphic */
  text-decoration: none; /* Remove underline */
  font-family: trebuchet, Arial, helvetica, sans-serif; /* Set the font family */
  font-size: medium; color: blue;
  font-weight: bold; /* Set the font size, boldness and colour */
  background: url('_themes/blocks/bhbtnne.gif') no-repeat; /* set the background image for links */
}
#navigate a:hover {
  background: url('_themes/blocks/bhbtnhe.gif') no-repeat; color: green; /* set image and font colour for hover */
}
</style>

Finally, add a style for the current page - this will use the Active image for the link. This style would be placed in an editable region if using a DWT, hence is in its own style block. In the nav. bar below the current page is page 2.

<style type="text/css">
#navigate #page2 {background: url('_themes/blocks/bhbtnse.gif') no-repeat; color: black;} /* sets the active image for background, and changes the font-colour to black. */
</style>

The finished navigation bar looks like this: