Reptag NAV_STRUCT / Dynamic structure from any level

[wingover]

Hi,

made a small reptag, called {NAV_STRUCT}.
You can:
- define the start-level (all, auto, alias)
- define expand all or only the active level
- add a style

Maybe it looks like the NAV_TABLE_COLUMN, but without javascript and complete with css-lists. Tested with 1.2.6 and with a alias for every menu.
(I only work with aliases...)

You also can use this for sitemaps.

Last Update: 16.03.2006, 14:30
- changed some code for valid html
- add new option => $active_parent, 0 or 1, you can decide, if the parent menu is marked as active or not

Download:
http://spielwiese.wireframe.de

Code: Select all

<?php

// parameter(4): {NAV_STRUCT:$start_level_name:$auto_start_level:$menu_expand:$active_parent:$style}
// $start_level_name: auto=>shows struct from act level, 0=>shows complete struct, string=>shows struct from this level
// $auto_start_level: startlevel from which menus are shown. only if $start_level_name <> 0, number=>number of startlevel >=0
// $menu_expand: expand all menus or not. 0=>no, 1>=yes. if yes, all id`s (ul, li, a) are changed in classes
// $active_parent: if $menu_expand=1, mark active parent menu as active. 0=>no, 1>=yes
// $style: name of style. string=>style name
// always write 0 for unused parameters
// example: {NAV_STRUCT:auto:2:0:1:myStyle}
// standard (for starting and testing or sitemap): {NAV_STRUCT:0:0:1:0:naviStruct}
// installation: make a file ("reptag_nav_struct.php") in "phpwcms_template\inc_script\frontend_render" and copy the script in the file
// Andi Platen, 16.03.2006, www.wireframe.de|www.gleitschirm-taxi.de|www.mountain-panorama.com



// -------------------------------------------------------------
function css_nav_struct($start_level_name="", $auto_start_level="", $menu_expand="", $active_parent="", $style="")
{
	$start_level_name = trim($start_level_name);
	$real_start_level_name = $start_level_name;
	$GLOBALS['auto_start_level'] = intval($auto_start_level);
	$GLOBALS['menu_expand'] = intval($menu_expand);
	$GLOBALS['active_parent'] = intval($active_parent);
	$GLOBALS['style'] = trim($style);

	$breadcrumb = get_navi_struct_breadcrumb($GLOBALS['content']["cat_id"], $GLOBALS['content']['struct']);
	$breadcrumb = implode("§§", $breadcrumb);
   	$breadcrumb = explode("§§", $breadcrumb);
   	$GLOBALS['breadkrempel'] = $breadcrumb;

	if($start_level_name == 'auto')
	{
		$counter_start = $auto_start_level - 1;
		$start_level_name = $breadcrumb[$GLOBALS['auto_start_level']];
	}
	else if($start_level_name == '0')
	{
		$GLOBALS['auto_start_level'] = 0;
		$counter_start = $GLOBALS['auto_start_level'];
		$start_level_name = $GLOBALS['content']["struct"][0]['acat_alias'];
	}
	else
	{
		$GLOBALS['auto_start_level'] = 0;
		$counter_start = $GLOBALS['auto_start_level'];
		$counter_start = 0;
	}

	foreach($GLOBALS['content']["struct"] as $key => $value)
	{
		if($GLOBALS['content']["struct"][$key]['acat_alias'] == $start_level_name)
		{
			$start_level_name = $GLOBALS['content']["struct"][$key]['acat_id'];
			$start_name = $GLOBALS['content']["struct"][$key]['acat_name'];
			$start_alias = $GLOBALS['content']["struct"][$key]['acat_alias'];
			break;
		}
	}

	$s = make_struct($start_level_name, $counter_start);

	if($real_start_level_name == '0')
	{
		if($start_alias == $GLOBALS['content']['struct'][$GLOBALS['content']['cat_id']]['acat_alias'])
		{
			$mystart = '<a id="' . $GLOBALS['style'] . '_current" href="index.php?' . $start_alias . '">' . $start_name . '</a>';
			$s = '<ul id="' . $GLOBALS['style'] . '_0_ul">' . "\n" . '<li id="' . $GLOBALS['style'] . '_active">' . $mystart . '</li>' . $s . '</ul>';
		}
		else if($GLOBALS['active_parent'] == '1')
		{
			$mystart = '<a id="' . $GLOBALS['style'] . '_current_0" href="index.php?' . $start_alias . '">' . $start_name . '</a>';
			$s = '<ul id="' . $GLOBALS['style'] . '_0_ul">' . "\n" . '<li id="' . $GLOBALS['style'] . '_0_active">' . $mystart . '</li>' . $s . '</ul>';
		}
		else
		{
			$mystart = '<a href="index.php?' . $start_alias . '">' . $start_name . '</a>';
			$s = '<ul id="' . $GLOBALS['style'] . '_0_ul">' . "\n" . '<li>' . $mystart . '</li>' . $s . '</ul>';
		}
	}

	if($s)
	{
		$s = '<div id="' . $GLOBALS['style'] . '">' . "\n" . $s . "\n" . '</div>';
	}

	$s = ereg_replace("</li><li", "</li>\n<li", $s);
	$s = ereg_replace("</li></ul>", "</li>\n</ul>", $s);
	$s = ereg_replace("</li><ul", "\n<ul", $s);
	$s = ereg_replace("</ul><li", "</ul></li>\n<li", $s);

	if($GLOBALS['menu_expand'] == '1')
	{
		$s = ereg_replace("<ul id", "<ul class", $s);
		$s = ereg_replace("<li id", "<li class", $s);
		$s = ereg_replace("<a id", "<a class", $s);
	}

	return $s;
}
// -------------------------------------------------------------

// -------------------------------------------------------------
function make_struct($start=0, $counter=0)
{
	$counter++;
	$act_cat = $GLOBALS['content']['struct'][$GLOBALS['content']['cat_id']]['acat_alias'];

	foreach($GLOBALS['content']['struct'] as $key => $value)
	{
		if($start == $GLOBALS['content']['struct'][$key]['acat_struct'] && $key && !$GLOBALS['content']['struct'][$key]['acat_hidden'])
		{
			if($GLOBALS['content']['struct'][$key]['acat_redirect'] != "")
			{
				$link = $GLOBALS['content']['struct'][$key]['acat_redirect'];
			}
			else
			{
				$link = "index.php?" . $GLOBALS['content']['struct'][$key]['acat_alias'];
			}

			if($GLOBALS['content']['struct'][$key]['acat_alias'] == $act_cat)
			{
				$s .= '<li id="' . $GLOBALS['style'] . '_active">';
			}
			else
			{
				$s .= '<li>';
			}

			if($GLOBALS['content']['struct'][$key]['acat_alias'] == $act_cat)
			{
				$s .= '<a id="' . $GLOBALS['style'] . '_current" href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a>';
			}
			else
			{
				$s .= '<a href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a>';
			}
			$s .= '</li>';

			if($GLOBALS['menu_expand'] == 0)
			{
				foreach($GLOBALS['breadkrempel'] as $a => $b)
				{
					foreach($GLOBALS['content']["struct"] as $c => $d)
					{
						if($b == $GLOBALS['content']["struct"][$c]['acat_alias'])
						{
							$breadcrumb_parent[] = $GLOBALS['content']["struct"][$c]['acat_struct'];
						}
					}
				}

				if($act_cat == $GLOBALS['content']['struct'][$key]['acat_alias'])
				{
					$s .= make_struct($key, $counter);
				}
				else if($key == $GLOBALS['content']['struct'][$GLOBALS['content']['cat_id']]['acat_struct'])
				{
					if($GLOBALS['active_parent'] == '1')
					{
						$alt = '<li><a href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
						$neu = '<li id="' . $GLOBALS['style'] . '_' . $counter . '_active"><a id="' . $GLOBALS['style'] . '_current_' . $counter . '" href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
						$s = str_replace($alt, $neu, $s);
					}
					$s .= make_struct($key, $counter);
				}
				else if(array_search($key, $breadcrumb_parent))
				{
					$z = array_search($key, $breadcrumb_parent);
					$z = $breadcrumb_parent[$z];
					if($GLOBALS['active_parent'] == '1')
					{
						$alt = '<li><a href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
						$neu = '<li id="' . $GLOBALS['style'] . '_' . $counter . '_active"><a id="' . $GLOBALS['style'] . '_current_' . $counter . '" href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
						$s = str_replace($alt, $neu, $s);
					}
					$s .= make_struct($z, $counter);
				}
			}
			else
			{
				if($GLOBALS['active_parent'] == '1' && in_array($GLOBALS['content']['struct'][$key]['acat_alias'], $GLOBALS['breadkrempel']))
				{
					$alt = '<li><a href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
					$neu = '<li id="' . $GLOBALS['style'] . '_' . $counter . '_active"><a id="' . $GLOBALS['style'] . '_current_' . $counter . '" href="' . $link . '">' . $GLOBALS['content']['struct'][$key]['acat_name'] . '</a></li>';
					$s = str_replace($alt, $neu, $s);
				}
				$s .= make_struct($key, $counter);
			}
		}
	}

	if($s)
	{
		$s = '<ul id="' . $GLOBALS['style'] . '_' . $counter . '_ul">' . "\n" . $s . '</ul>';
	}

	return $s;
}
// -------------------------------------------------------------

// -------------------------------------------------------------
function get_navi_struct_breadcrumb($start_id, $struct_array)
{
	$data = array();
	while ($start_id)
	{
		$data[$start_id] = $struct_array[$start_id]["acat_alias"];
		$start_id		 = $struct_array[$start_id]["acat_struct"];
	}
	if(!empty($struct_array[$start_id]["acat_alias"]))
	{
		$data[$start_id] = $struct_array[$start_id]["acat_alias"];
	}
	return array_reverse($data, 1);
}
// -------------------------------------------------------------

// -------------------------------------------------------------
if(!( strpos($content["all"],'{NAV_STRUCT')===false ) )
{
   $content["all"] = preg_replace('/\{NAV_STRUCT:(.*?):(.*?):(.*?):(.*?):(.*?)\}/e', 'css_nav_struct("$1","$2","$3","$4","$5")', $content["all"]);
}
// -------------------------------------------------------------

?>

And here a example style for a sub-menu with 2 structure-levels:

Code: Select all

#naviStruct
{
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	border-bottom: dashed 1px #999999;
}
#naviStruct ul
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#naviStruct ul a
{
	display: block;
	padding: 2px 0px 2px 20px;
	width: 100%;
	text-decoration: none;
	border-top: dashed 1px #999999;

	background-image: url(../../stuff/images/diverse/arrow_1.gif);
	background-repeat: no-repeat;
	background-position: 10px 6px;
}
#naviStruct ul ul a
{
	display: block;
	padding: 2px 0px 2px 31px;
	width: 100%;
	text-decoration: none;

	background-image: url(../../stuff/images/diverse/arrow_2.gif);
	background-repeat: no-repeat;
	background-position: 21px 7px;
}
#naviStruct a:link, #naviStruct a:visited
{
	color: #999999;
	font-weight: bold;
	text-decoration: none;
}
#naviStruct a:hover
{
	color: #000000;
}
#naviStruct_1_active a:link#naviStruct_current_1, #naviStruct_1_active a:visited#naviStruct_current_1, #naviStruct_1_active a:hover#naviStruct_current_1, #naviStruct_1_active a:active#naviStruct_current_1
{
	color: #000000;
}
#naviStruct_active a:link#naviStruct_current, #naviStruct_active a:visited#naviStruct_current, #naviStruct_active a:hover#naviStruct_current, #naviStruct_active a:active#naviStruct_current
{
	color: #000000;
}

Grüzli - Andi

[wingover]

Hi,

I add a new option.
So you can decide (0 or 1), if the active parent menu should be marked as active or not.

Example is here: http://web79.s21-ffm-r03.gn-s.net/gcreit/
I used the tag for the left sub-level-navigation.
(Site is under construction and the address will change soon.)

Here I used the tag only for the sitemap: http://www.vm-mediaservice.de


Grüzli - Andi

[update]

Hi Andi,

I use this one for a new site and this active parent thing is really an improvement!. Is it possible to have different "markers" for active parents and childs?
BTW this rt is a really nice one!:D

Greetings
claus

[wingover]

Hallo Claus,

different markers should be possible via css.
If you look at the scource-code, every <ul> has the style-name with the number of the level. So you have #navi_left_2 ul and #navi_left_3 ul.
Or, like I did it on the golf-page, you can write it without special names.
#navi_left ul and #navi_left ul ul

Code: Select all

<ul id="naviLeft_2_ul">
<li><a href="index.php?drivingrange">Drivingrange</a></li>
<li id="naviLeft_active"><a id="current" href="index.php?birdiemaker">Birdiemaker</a></li>
<ul id="naviLeft_3_ul">
<li id="naviLeft_active"><a id="current" href="index.php?loch_1">Loch 1</a></li>
<li><a href="index.php?loch_2">Loch 2</a></li>

Grüzli - Andi

[update]

Thanks for the fast reply, Andi!
I will go get some coffe and try again
Greetings
claus

[ssyfrig]

Hi

Looks great, question is there a possibility to use this RT without give any category title a alias.

so /index.php?id=4,0,0,1,0,0


thanks, Sven

[wingover]

Hi Sven,

this could be a problem with the current version of the reptag.
Because the script uses the alias for checking the current menu, the start-level and so on.

Of course, it`s possible to change the script, that it works with alias and id.
But that is no function, that I need, because I always work with alias.
Maybe, when I have a lot of time and nothing to do, I can change the script


Grüzli - Andi

[update]

Hi Andi,

just want to say thanks for this neat'n sweet'n clean RT!
After having done the update it's even better
(playing around with tableless page layout... )

Greetings
claus

[ff123]

Excellent piece of work. Another step towards a table-less and completely CSS-based phpwcms !
Maybe you should add this addon to the addon website:
http://phpwcms.raramuri.com/component/o ... itstart,5/

[flip-flop]

Hi Andi,

one of the best navi-RT´s I have seen here. Congratulation.

One question about the active state:
At the last active entry we can´t include the right background image for active state.
Please have a look: www(.)mz.ja-nek(.)de/test2_4.phtml

I am missing a class like "naviStruct_X_active" - naviStruct_current_X
There is generated a id and class like "naviStruct_active" - "naviStruct_current"

Have you any idea how to solve it?

Gruß Knut

[wingover]

Hi flip-flop,

do you have the latest version?
If you take a look at this link:
http://www.gcreit.de/index.php?beitragsordnung

And here the source-code:

Code: Select all

<ul id="naviLeft_2_ul">
<li><a href="index.php?kontakt">Kontakt</a></li>
<li><a href="index.php?praesidium">Präsidium</a></li>
<li id="naviLeft_2_active"><a id="naviLeft_current_2" href="index.php?mitgliedschaft">Mitgliedschaft</a>
<ul id="naviLeft_3_ul">
<li id="naviLeft_active"><a id="naviLeft_current" href="index.php?beitragsordnung">Beitragsordnung</a></li>
</ul></li>
<li><a href="index.php?greenfee">Greenfee</a></li>
<li><a href="index.php?hotel_peternhof">Hotel Peternhof</a></li>
<li><a href="index.php?partnerhaeuser">Partnerhäuser</a></li>
<li><a href="index.php?partnerplaetze">Partnerplätze</a></li>
</ul>

There is an unique number in the id for each ul-level.
The active li: 'naviLeft_active'
The active a: 'naviLeft_current'
The active parent li: 'naviLeft_2_active'
The active parent a: 'naviLeft_current_2'

Another example, I used the tag is here (for the sitemap):
http://www.vm-mediaservice.de/index.php?sitemap

For the sitemap, I set the '$menu_expand' to 1. So every 'id' is changed in 'class', because it`s static and expanded.

Here the source:

Code: Select all

<ul class="sitemap_0_ul">
<li><a href="index.php?index">Home</a>
<ul class="sitemap_1_ul">
<li><a href="index.php?kompetenz">Navi oben</a>
<ul class="sitemap_2_ul">
<li><a href="index.php?kompetenz">Kompetenz</a></li>
<li><a href="index.php?high_end_scan">Foto-Bildbearbeitung</a>
<ul class="sitemap_3_ul">
<li><a href="index.php?high_end_scan">High-End-Scan</a></li>
<li><a href="index.php?produktfotografie">Produktfotografie</a></li>
<li><a href="index.php?bildbearbeitung">Bildbearbeitung</a></li>
</ul></li>
<li><a href="index.php?colormanagement">Prepress-Layout</a>
<ul class="sitemap_3_ul">
<li><a href="index.php?colormanagement">Colormanagement</a></li>
<li><a href="index.php?layout_reinzeichnung">Layout/Reinzeichnung</a></li>
<li><a href="index.php?digitalproof">Digitalproof</a></li>
</ul></li>
<li><a href="index.php?offsetdruck">Print</a>
<ul class="sitemap_3_ul">
<li><a href="index.php?offsetdruck">Offsetdruck</a></li>
<li><a href="index.php?digitaldruck">Digitaldruck</a></li>
<li><a href="index.php?grossformatdruck">Großformatdruck</a></li>
</ul></ul></li>
<li><a href="index.php?navi_unten">Navi unten</a>
<ul class="sitemap_2_ul">
<li><a href="index.php?referenzen">Referenzen</a></li>
<li><a href="index.php?downloads">Downloads</a></li>
<li><a href="index.php?kontakt">Kontakt</a></li>
<li><a href="index.php?impressum">Impressum</a></li>
<li><a href="index.php?partner">Partner</a></li>
<li class="sitemap_active"><a class="sitemap_current" href="index.php?sitemap">Sitemap</a></li>
</ul></ul></ul>

And both are valid html:
http://validator.w3.org/check?verbose=1 ... agsordnung
http://validator.w3.org/check?verbose=1 ... %3Fsitemap


Maybe I can change the code, that the tag works only with 'class' and not with 'id', but I think with id`s, it`s better.


Grüzli - Andi

[flip-flop]

Hi Andi,

thanks for your answer and the push into the right direction. I should once exactly look only, before I ask one place.
Now it works very well for me.
#naviStruct_4_ul a:link#naviStruct_current, ......

A bottle of beer to you.

Gruß Knut

[Pudekamp.dk]

Hi,

I have used this tag on a site: http://familieplejen.123igang.dk/kommuner.phtml and it works great.

My only problem is, I can't figure out how to change the left margin of the menu - I have looked in the reptag_nav_struct_style.css and changed some stuff in there, but it doesn't seem to have any effect

The way I use the tag is this:

Code: Select all

{NAV_STRUCT:auto:1:0:1:naviStruct}

I have tried to change the background of #naviStruct ul a but nothing happens. I thought I could change the black dot into some other graphic this way, but again: no luck

Can anyone please point me in the right direction?

[wingover]

Hi,

maybe it helps, when you see an example.
On this page, I used the tag for the left navi:

http://www.gcreit.de/index.php?golfclub

{NAV_STRUCT:auto:2:0:1:naviLeft}

And here are the styles for that:

Code: Select all

/* naviLeft */
#naviLeft
{
	margin: 0px;
	padding: 0px 0px 1px 0px;
	width: 100%;
	
	background-image: url(../../stuff/images/diverse/punktlinie.gif);
	background-repeat: no-repeat;
	background-position: 0px bottom;
}

#naviLeft ul
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#naviLeft li
{
	background-image: url(../../stuff/images/diverse/punktlinie.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#naviLeft ul a
{
	display: block;
	padding: 2px 0px 2px 20px;
	width: 100%;
	text-decoration: none;	

	background-image: url(../../stuff/images/diverse/dreieck.gif);
	background-repeat: no-repeat;
	background-position: 10px 6px;
}

#naviLeft ul ul a
{
	display: block;
	padding: 2px 0px 2px 31px;
	width: 100%;
	text-decoration: none;

	background-image: url(../../stuff/images/diverse/pfeil.gif);
	background-repeat: no-repeat;
	background-position: 21px 7px;
}

#naviLeft a:link, #naviLeft a:visited
{
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

#naviLeft a:hover
{
	color: #84C305;
}

#naviLeft_2_active a:link#naviLeft_current_2, #naviLeft_2_active a:visited#naviLeft_current_2, #naviLeft_2_active a:hover#naviLeft_current_2, #naviLeft_2_active a:active#naviLeft_current_2
{
	color: #84C305;
}

#naviLeft_active a:link#naviLeft_current, #naviLeft_active a:visited#naviLeft_current, #naviLeft_active a:hover#naviLeft_current, #naviLeft_active a:active#naviLeft_current
{
	color: #84C305;
}

[Pudekamp.dk]

Now it works - the problem was I didn't copy the css into the standard CSS, I thought that the CSS file was supposed to be in the folder, and then would be accessed from the file.

But when I copyed the CSS to the admin section, then no problem

Thanks!