Adjust the Menu Stylesheet

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn how to change the menu stylesheet to adjust the menu location, dimensions, font, color and borders. All the menu layout is done through an external stylesheet: menu_xx.css that can be modified for your particular publication. The default menu tree is build with unsorted list items.

The JavaScript menu distributed with Tópico was developped by TwinHelix Design. To make sure you comply with the FreeStyleMenus license agreement, make sure the following link is visible on your web publication: DHTML / JavaScript Menu by TwinHelix Designs. The default templates already do have this link visible.

Better yet, if you publish on the web and find this script useful, you can also make a donation to TwinHelix.

The HTML markup

HTML
			<!-- TODO -->
Tip

You can also create your own XSLT template to transform the master tree into your own markup.

The menu stylesheet

CSS
			/* TODO */

The above stylesheet is divided into four discrete sections:

  • The top menu bar
  • The unordered list (first second and third level)
  • The list items (first second and third level)
  • The hyperlinks (first second and third level)

The top menu bar

The top element is the menu bar <div id="menubar">, which is relatively positioned and contains the whole top level list items. You can set the left and top positions, the width, height and other properties in the first selector.

The unordered list

As you can see in the above HTML markup, the unordered list tag <ul> acts as a container for the individual list items. There is three level of unordered lists defined in the stylesheet to accomodate differencing the top level, first level and sublevel menu items containers.

Tip

One important thing to note in the above stylesheet is the margin-left:160px; proprerty on the third level <ul> tag, which offsets the container to the right to fit the sub menu with the width:160px; property of the list items.

The list items

The list items can be seen as boxes that wrap the actual hyperlink. Again there is three level of list items defined in the stylesheet to accomodate differencing the top level, first level and sublevel list items containers.

This extra container can be used to display borders around the hyperlink, although the hyperlink itself can do it. It's your choice!

Tip

When working with nested lists like this one, lower level items henerit most of their properties from their parent. As an example, there no point in setting the same border to a lower <li> if an ancestor already have the same border.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back
45 / 194