CSS menu classes

Using the CSS menu classes

Until now we have used the default settings of the menu.css file. In the gallery you can find different menu.css files to suits your need. But if you want full controle, you need to edit the menu.css yourself.

menu.css contains a number of classes used to display the menu.
A menu consists of many parts and each have ther own class, for you to fidle with, so you can make i look just right. To do this you must be familiar with CSS (Cascading Style Sheeds) There are many good guides to that topic on the net. Styles are used to set the colors, padding, borders eg. for different types of tags in HTML. Very usefull, but still rather messy.
So from here on I presume that you have a basic knowledge of CSS.

The static (Always visible) part of a menu consists of the following zones, each with its own class:

menu
menu_row *
menu_item	X
menu_hover	X
menu_selected	X
menu_inactive	X
menu_image_left
menu_image_right
menu_subicon	4
menu_subicon_hover	4

* Menu_row is only visable with transparent background in the menu item element.

Below is a menu that actualy use these wonderful colors:

The submenus has a parallel set of clases, starting with submenu_... instead of menu_... But otherwise identical.
Some of the most usefull attributes to set are:

background-color: <color code>;
color: <color code>;
padding:<number> px;
border: <number> px <shape> <color code>;
	or
border-collapse:collapse;

The CSS file might look complicated and messy, but is realy is'nt difficult. The problem is that it dos'nt always work the way one expects it to or for that matter, exactly the same way in all browsers.
But the above mentioned attributes usually workes well.
For less hardcore webdesigners, it is usually easier to use a web designer tool like DreamWeaver to edit the styles. But non of them will be able to show you the result, since the menus are generated in javascript. But is is doable. I prefer to handcode it, since it givs me a feeling of controle :o)

	JavaScriptMenus

JavaScriptMenus

Using the CSS menu classes