7.0
Table Of Contents
4.5 Menu bar
The Menu bar provides access to the main sections of PSM Web. Like the User Info bar the items of the Menu
bar are created using HTML lists, which means that you can change its orientation by altering the CSS file.
In the default skin the Menu bar is placed directly beneath the User Info bar
4.5.1 Styling the menu items
The Menu bar is generated using HTML lists, within the list items hyperlinks (<a> tags) are used to define the
target when the user clicks the item. The code snippet below shows a HTML code generated for a menu bar.
<div id="menu">
<div>
<ul>
<li id="menuitem_1" class="selected">
<a href="/site.php?pageid=welcome&page=1&init=true">Home</a>
</li>
<li id="menuitem_2">
<a href="/site.php?pageid=storefront_overview&page=1&init=true">
New Document
</a>
</li>
<li id="menuitem_3">
<a href="/site.php?pageid=ordermanager_overview&page=1&init=true">
Order Manager
</a>
</li>
</ul>
</div>
</div>
Below you'll the see CSS of the menu items in style-element-menu.php file. The following CSS code is used to
show a horizontal menu bar. By removing the display: inline attribute of the <li> tag the orientation is
changed from horizontal to vertical.
/* Menu */
/*
Remove the commented lines to use the web design contrast color in the menu.
Comment the background lines to hide the gradient image
*/
#menu
{
border-width: 0 1px 1px 1px;
border-color: #CDCDCD;
border-style: solid;
width: 100%;
/* background-color: <? generateSkinContrastColorHighLight(1); ?>; */
background: #D9E1E5 url('images/nav_bg.gif');
height: 26px
}
Objectif Lune Inc. © 2010 24