1. What is Menu?

Menu is a service plugin for IncPlugins to create horizontal and versical menus.

2. Menu installation

Download the latest Menu release. It comes with IncPlugins Free and Pro. Unzip it to any temporary directory. Copy menu.php to your IncPlugins directory. Add the plugin include line to the IncPlugins settings file settings.php.

3. Using Menu

3.1. Menu Ideology

This plugin is a service plugin. It means that it cannot be used directly. It contains no CSS code to show different menu styles. But you can create these styles manually or download additional style plugins.

Any menu contain:

Header
Items
Footer

3.2. Vertical and Horizontal DIV-based Menu

Use these functions to define a header, items and a footer:

function menu($class = '')
function menu_item($name, $link, $follow = true)
function menu_end($clear = false)

Here are:

$class — Menu CSS style name. Empty line means last used style name.
$name — Menu item text.
$link — Menu item link.
$follow — Enable or disable Google Bot follow to this link
$clear — Insert an empty <div> with CSS style clear: both;. Useful for horizontal menus.

Example of a simple menu:

<?=menu('vmenu').
    menu_item(T('Item One'), $root.'link1/').
    menu_item(T('Item Two'), $root.'link2/').
    menu_item(T('Item Three'), $root.'link3/').
menu_end(true)?>

This code will produce this HTML output:

<div class="vmenu">
<div class="first"><a href="../link1/">Item One</a></div>
<div><a href="../link2/">Item Two</a></div>
<div><a href="../link3/">Item Three</a></div>
</div><div class="menu_clear"></div>

3.3.Text-based Menu

Use these functions to define a header, items and a footer of a simple text-based menu:

function menu_s($separator = ' | ')
function menu_s_item($name, $link, $follow = true)
function menu_s_end()

Here are:

$separator — HTML code of setarators
$name — Menu item text.
$link — Menu item link.
$follow — Enable or disable Google Bot follow to this link

Example of a simple text-based horizontal menu:

<?=menu_s().
    menu_s_item(T('Item One'), $root.'link1/').
    menu_s_item(T('Item Two'), $root.'link2/').
    menu_s_item(T('Item Three'), $root.'link3/').
menu_s_end()?>

This code will produce this HTML output:

<a href="../link1/">Item One</a>
 | <a href="../link2/">Item Two</a>
 | <a href="../link3/">Item Three</a>

4. Create CSS Styles for your Menus

To use Menu plugin you must create CSS styles.

4.1. Typical Vertical Menu CSS Code

Use this CSS code as a vertical menu template. This code is tested on IE5, IE6, IE7, Opera 8+ and Firefox.

.vmenu {
    font-size: 11px;
}

.vmenu a, .vmenu a:visited {
    display: block;
    background-color: #f8f8f8;
    color: #0d398c;
    padding: 4px 12px;
    text-decoration: none;
}

.vmenu a:hover {
    color: #0d398c;
    background-color: #f0f0f0;
    text-decoration: underline;
}

.vmenu div {
    margin: 0;
    border: solid #e8e8e8;
    border-width: 1px 0 0 0;
}

.vmenu .first {
    border-width: 0;
}

4.2. Typical Horizontal Menu CSS Code

Use this CSS code as a horizontal menu template. This code is tested on IE5, IE6, IE7, Opera 8+ and Firefox.

.hmenu {
    font-size: 11px;
    background-color: #f8f8f8;
    border: solid #e8e8e8;
    border-width: 1px 1px 1px 1px;
    height: 20px;
    line-height: 20px;
}

.hmenu a, .hmenu a:visited {
    display: block;
    width: 100px;
    height: 20px;
    background-color: #f8f8f8;
    color: #0d398c;
    text-decoration: none;
}

.hmenu a:hover {
    color: #0d398c;
    background-color: #f0f0f0;
    text-decoration: underline;
}

.hmenu div {
    width: 100px;
    display: inline;
    float: left;
    border: solid #e8e8e8;
    border-width: 0 1px 0 0;
    text-align: center;
}

Plugin Menu User’s Manual