7.0

Table Of Contents

4.9 Sub menus

Several sections have one or multiple sub menus. Sub menus are used to navigate to sub sections of that

specific section. Sub menus have their own classes and styles.

The sub menu of the Settings section

Like the Main menu and the User Info block the sub menus are created using HTML lists (<ul> tag and <li>

tags). The following code snippet shows source code of a sub menu (Publication Type section):

</div>

<div class="formHeader">Letterhead</div>

<ul>

<li class="level0">General</li>

<li class="level1">Summary</li>

<li class="level1 selected">Properties</li>

<li class="level0">Pricing and Ordering</li>

<li class="level1">Settings</li>

<li class="level1">Volume discount table (-)</li>

<li class="level0">Production</li>

...

</ul>

</span>

</div>

The list items have two class selectors. The first defines the indent level. The sub menu of the Settings section

uses sub levels for the items that relate to the Email subsection. The second selector is optional and will only

be set to mark the selected menu item. This allows you to visually mark the selected item by changing its

style in the style documents.

#submenu li.level0{

text-indent: 2px;

background-color: <? generateSkinContrastColor(); ?>;

background: #D9E1E5 url('images/nav_bg.gif');

background-repeat: repeat-x;

background-position: top left;

border-top: 1px solid #CDCDCD;

border-bottom: 1px solid #CDCDCD;