Menu examples

<?imcms:menu ?> tag initiates a menu and <?/imcms:menu?> tag completes a menu. The simple menu can be created in following way:

<?imcms:menu?><?/imcms:menu?>

Using above-mentioned way it is possible to create one ore several links. All links, created in that way will be placed in one row with gap between them. Whatever lies between <?imcms:menu?> and <?/imcms:menu?> will be repeated (loop) once for each link. All of the menu blocks will be automatically numbered in system from 1 and further in order they inserted in template.

In order to control menu blocks in code it is possible to mark them by inserting attribute no=’x’ inside numbered tag.

To give menu a numbered list look the menu should be created in following way:

<UL>
<?imcms:menu no='2'?>
<LI></LI>
<?/imcms:menu?>
</UL>

If the menu block contains none of the active/published links it will not be able on page in normal mode.
In administration mode after Link button is pressed the special red marks will apears on page in place specified while template creation. By pressing the special red marks the Menu creation special box will appear in same place.

The <?imcms:menuloop?> and <?/imcms:menuloop?> tags are use inside menu code to control it’s repeated part (loop). Without those tags everything betveen <?imcms:menu?> and <?/imcms:menu?> will be repeated (loop).

Previous example can be created in following way:

<?imcms:menu no='2'?>
<UL>
<?imcms:menuloop?>
<LI></LI>
<?/imcms:menuloop?>
</UL>
<?/imcms:menu?>

In following example the menu will be created in table form. If the menu block contains none of the active/published links it will not be able on page in normal mode. The table rows repeated with help of <? imcms : menuloop ?> tag around:

<?imcms:menu no='3'?>
<table border="0" cellpadding="2" cellspacing="0" width="200">
<tr>
<td colspan="2"><img src="/images/1x1_black.gif" width="196" height="1"></td>
</tr>
<?imcms:menuloop?>
<tr>
<td> <img src="/images/dot_arrow_list.gif" border="0"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><img src="/images/1x1_black.gif" width="196" height="1"></td>
</tr>
<?/imcms:menuloop?>
<tr>
<td><img src="/images/1x1.gif" width="16" height="1"></td>
<td><img src="/images/1x1.gif" width="176" height="1"></td>
</tr>
</table>
<?/imcms:menu?>

To apply different look for each menu-loop row use <?imcms:menuitem?> and <?/imcms:menuitem?> tags to create different properties in repeated code.
Each item repeated (loop) periodically. For every item showing in case of odd number of links in menu use <?imcms:menuitemhide?> and <?/imcms:menuitemhide?> tags inside last item.
Sometimes all items need to be displayed even if they are empty, e.g. if you work with tables contains certain amount of TD in one row, then the  <?imcms:menuitemhide?> is not in use. 
The following example shows how to set different background colours on each link:

<?imcms:menu no='4'?>
<table border="0" cellpadding="3" cellspacing="0" width="200">
<?imcms:menuloop?>
<?imcms:menuitem?>
<tr>
<td bgcolor="#E7E7E7"> </td>
</tr>
<?/imcms:menuitem?> <?imcms:menuitem?> <?imcms:menuitemhide?>
<tr>
<td bgcolor="#F5F5F5"> </td>
</tr>
<?/imcms:menuitemhide?> <?/imcms:menuitem?> <?/imcms:menuloop?>
</table>
<?/imcms:menu?>

In the following example is used <? imcms : menuitem ?> to create menu in three columns. Because there is no <?imcms:menuitemhide?> tag in the “loop” then all empty items is displayed to complete entire “loop” with three columns. So the loop generates valid HTML code that functioning in all common browsers.

Example:

<?imcms:menu no='1'?>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666699">
<table border="0" cellpadding="3" cellspacing="1" width="540">
<?imcms:menuloop?>
<tr>
<?imcms:menuitem?>
<td width="180" bgcolor="#f5f5f5"> &nbsp;</td>
<?/imcms:menuitem?>
<?imcms:menuitem?>
<td width="180" bgcolor="#f5f5f5">&nbsp;</td>
<?/imcms:menuitem?>
<?imcms:menuitem?>
<td width="180" bgcolor="#f5f5f5">&nbsp;</td>
<?/imcms:menuitem?>
</tr>
<?/imcms:menuloop?>
</table></td>
</tr>
</table>
<?/imcms:menu?>

To create menu items with pictures/buttons instead of text use tag. There is a possibility to edit and sort pictures directly in administration mode. Pictures can be uploaded in system through “file manager” in administration mode and then inserted in menu from “Image archive” through “Browse” button in “Page info” window.

In that kind of menu the imCMS system is not fully in use. Certainly, it’s easier to update page without uploading new image each time to edit link to some page.

By using the Stylesheets (CSS) it’s possible to reach almost full control of link fonts and layouts. It is possible to create sophisticated navigation and graphics without using images almost at all.

It is possible to use tag with other menu tags. No necessarily that it must be a complete button, e.g. it can be some kind of list item image in same color spectrum as current page or picture.

Example: 

<?imcms:menu no='3'?>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/images/ex_menu_btn_top.gif" width="187" height="18"></td>
</tr>
<?imcms:menuloop?>
<tr>
<td> </td>
</tr>
<?/imcms:menuloop?>
<tr>
<td><img src="/images/ex_menu_btn_bottom.gif" width="187" height="26"></td>
</tr>
</table>
<?/imcms:menu?>