Simple "How To Build Custom Menu"

[Oliver Georgi]

Hi everybody.

Just a little snippet of code of how to build custom ul/li based navigation in phpwcms.

I think this might be helpful for everybody wants to have more structured navigation. The concept behind is very universal.

[Note: all "numbers" here are structure level IDs]

Create a new file navi.php in template/inc_script/frontend_render and paste in following code:

Code: Select all

<?php

// Top Navigation
$_mainNavi		= array(0, 1, 2, 3);
// 0 = root, while all others are selected structure level IDs

// Left Navigation
$_leftNavi		= array(4, 5, 6, 7, 8); // left navi IDs


$_mainNaviAll	= array();
$_leftNaviAll	= array();

foreach($_mainNavi as $value) {

	$_mainNaviAll[$value]  = '<li';
	if((isset($LEVEL_ID[1]) && $LEVEL_ID[1] == $value) || (!isset($LEVEL_ID[1]) && $value==0)) {
		$_mainNaviAll[$value] .= ' class="active"';
	}
	$_mainNaviAll[$value] .= '><a href="index.php?';
	$_mainNaviAll[$value] .= empty($content['struct'][$value]['acat_alias']) ? 'id='.$value : $content['struct'][$value]['acat_alias'];
	$_mainNaviAll[$value] .= '">'.html_specialchars($content['struct'][$value]['acat_name']).'</a></li>';

}

	// @string $parameter = "menu_type, start_id, max_level_depth, class_path, class_active,
	// ul_id_name, wrap_ul_div(0 = off, 1 = <div>, 2 = <div id="">, 3 = <div class="navLevel-0">),
	// wrap_link_text(<em>|</em>)"

foreach($_leftNavi as $value) {

	$_leftNaviAll[$value]  = '<ul>'.LF;
	
	$_leftNaviAll[$value] .= '	<li';
	if((isset($LEVEL_ID[1]) && $LEVEL_ID[1] == $value)) {
		$_leftNaviAll[$value] .= ' class="active"';
		$_isActive = true;
	} else {
		$_isActive = false;
	}
	$_leftNaviAll[$value] .= '><a href="index.php?';
	$_leftNaviAll[$value] .= empty($content['struct'][$value]['acat_alias']) ? 'id='.$value : $content['struct'][$value]['acat_alias'];
	$_leftNaviAll[$value] .= '">'.html_specialchars($content['struct'][$value]['acat_name']).'</a>';
	
	if($_isActive) {
		$_leftNaviAll[$value] .= buildCascadingMenu('F,'.$value.', , , active');
	}
	
	$_leftNaviAll[$value] .= '</li>'.LF.'</ul>';

}

$content['all'] = str_replace('{NAVIMAIN}', implode(LF.'    ', $_mainNaviAll), $content['all']);
$content['all'] = str_replace('{NAVILEFT}', implode(LF, $_leftNaviAll), $content['all']);

?>

Lets see:

Code: Select all

[0] Home
    [1] About Us
    [2] Contact
    [3] News
    [4] Product 1
         [] sub1 product 1
         [] sub2 product 1
         [] sub3 product 1
         [] ....
    [5] Product 2
         [] ....
    [6] Product 3
    [7] Product 4
    [8] Product 5

And will render in frontend like this

Code: Select all

<ul>[Home | About Us | Contact | News ]</ul>
<ul>
[Product 1]
    <ul>
    [sub 1]
    [sub 2]
    [sub 3]
    </ul>
</ul>
<ul>[Product 2]</ul>
<ul>[Product 3]</ul>
<ul>[Product 4]</ul>
<ul>[Product 5]</ul>

...and so on. Try it - it's pretty simple but flexible and can be styled using CSS.

Use {NAVIMAIN} and {NAVILEFT} in your template at positions the result should be rendered...

Oliver