7.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">
<a href="/site.php?pageid=welcome&amp;page=1&amp;init=true">Home</a>
</li>
<li id="menuitem_2">
<a href="/site.php?pageid=storefront_overview&amp;page=1&amp;init=true">
New Document
</a>
</li>
<li id="menuitem_3">
<a href="/site.php?pageid=ordermanager_overview&amp;page=1&amp;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 hor-
izontal menu bar. By removing the display: inline attribute of the <li> tag the orientation is changed from horizontal to ver-
tical.
/* 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
}
#menu a
{
/* background-color: <? generateSkinContrastColorHighLight(1); ?>; */
background: #D9E1E5 url('images/nav_bg.gif');
border-right: 1px solid #AFBEC7;
©2010 Objectif Lune Inc - 230 -