Navigation in different Levels

Assumption: The first navigation level is to be represented horizontal, for example in the head area of the side. The deeper levels are to be represented vertically, for example on the left side of the homepage.

Horizontal with the active level category_02
| home | category_01 | [category_02] | category_03 | category_04 |

Vertical output of the sub level from the active parent category [category_02]

  • category_02_01
  • category_02_02
  • category_02_03


Docu:
Forum: NAV_LIST_UL in verschiedenen Ebenen (using the hepl of the english/navigation/little-helper/level-lift)

Author: K.Heermann (flip-flop) http://planmatrix.de 2009/05/13
CMS-Version: >= V1.3.0
Version:
Update:

Condition:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_cntPHP_rt'] = 1;



For the parameters to reread ask NAV_LIST_UL (parameters).
The complete CSS-set: NAV_LIST_UL (CSS)

To solve the problem we need two navigations, one for the horizontal, the other one for the vertical range. Important is a parameter of the horiz. navigation.
The output is restricted to only one level ({NAV_LIST_UL:FP,0,1,act_path,active}).

Proceed on the assumption of the following structure (IDs are invented):

------------------------------------
L  E  V  E  L
.:  :  :  :
.0  1  2  3   <- LEVEL-No.
.:  :  :  :
-+ home   :                    ID=0
-+--+ category_01              ID=01
-+--+--+ category_01_01        ID=10
-+--+--+ category_01_02        ID=11
-+--+ category_02              ID=02
-+--+--+ category_02_01        ID=04
-+--+--+--+ category_02_01_01  ID=06
-+--+--+--+ category_02_01_02  ID=07
-+--+--+ category_02_02        ID=05
-+--+--+ category_02_03        ID=08
-+--+ category_03              ID=03
-+--+ category_04              ID=09
.:  :  :  :
.0  1  2  3   <- LEVEL No.
------------------------------------

Displaying the output:

<div class=“nlu_navi1”>
{NAV_LIST_UL:FP,0,1,act_path,active}
</div> → only the first level (deepth=1) behind “Home (ID=0)” (here with the parent switch “P” in order to also represent Home themselves)

is resulting in: | home | category_01 | [category_02] | category_03 | category_04 |
And structurally:

------------------------------------
L  E  V  E  L
.:  :  :  :
.0  1  2  3   <- LEVEL-No.
.:  :  :  :
-+ home   :                    ID=0
-+--+ category_01              ID=01
-+--+ category_02              ID=02 (if active, have a look above)
-+--+ category_03              ID=03
-+--+ category_04              ID=09
.:  :  :  :
.0  1  2  3   <- LEVEL No.
------------------------------------

Without the parameter “P” it looks like:

<div class=“nlu_navi1”>
{NAV_LIST_UL:FP,0,1,act_path,active}
</div> → only the first level (depth=1) behind “Home (ID=0)” (here without the parent switch “P” Home is not represented)

is resulting in: | category_01 | [category_02] | category_03 | category_04 |
And structurally:

------------------------------------
L  E  V  E  L
.:  :  :  :
.0  1  2  3   <- LEVEL-Nr.
.:  :  :  :
-+--+ category_01              ID=01
-+--+ category_02              ID=02 (if active, see below)
-+--+ category_03              ID=03
-+--+ category_04              ID=09
.:  :  :  :
.0  1  2  3   <- LEVEL Nr.
------------------------------------

While still the sub level display is missing yet, now the Level-Lift is used additionally (output of navigation starting from a certain level).

Level-Lift:

This php-snippet is placed in the layout at that point, where this navigation component has to appear. (In our case the output is starting from the first level - > LEVEL_ID'][ 1 ]).

[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
}
[/PHP]

Where LEVEL_ID'][X] is the level which can be indicated. (Output starting from this level …).

This second navigation call ({NAV_LIST_UL:….}) thus embedded into a small controll script which queries the levels.

conf.inc.php → $phpwcms['allow_cntPHP_rt'] = 1; allow PHP replacement tags and includes in content parts

Output of the active sub level

E.g. with category_02 = active (in the example this was arranged by the horizontal Navi)

  • category_02_01
  • category_02_02
  • category_02_03
------------------------------------
L  E  V  E  L
.:  :  :  :
.0  1  2  3   <- LEVEL-No.
.:  :  :  :
-+--+--+ category_02_01        ID=04
-+--+--+ category_02_02        ID=05
-+--+--+ category_02_03        ID=08
.:  :  :  :
.0  1  2  3   <- LEVEL No.
------------------------------------


E.g. with category_02 = active → act_path (horizontal) and category_02_01 = active:

  • category_02_01
    • category_02_01_01
    • category_02_01_02
  • category_02_02
  • category_02_03
------------------------------------
L  E  V  E  L
.:  :  :  :
.0  1  2  3   <- LEVEL-No.
.:  :  :  :
-+--+--+ category_02_01        ID=04 (active)
-+--+--+--+ category_02_01_01  ID=06
-+--+--+--+ category_02_01_02  ID=07
-+--+--+ category_02_02        ID=05
-+--+--+ category_02_03        ID=08
.:  :  :  :
.0  1  2  3   <- LEVEL No.
------------------------------------

Summary:

<div class=“nlu_navi1”> {NAV_LIST_UL:FP,0,1,act_path,active} </div>

and

[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
}
[/PHP]

the output of this is (with active level category_02)

| home | category_01 | [category_02] | category_03 | category_04 |

  • category_02_01
  • category_02_02
  • category_02_03


or (with active level category_02 and category_02_01)

| home | category_01 | [category_02] | category_03 | category_04 |

  • category_02_01
    • category_02_01_01
    • category_02_01_02
  • category_02_02
  • category_02_03
english/navigation/nav_list_ul-example/navi-different-level.txt · Last modified: 2010/01/28 09:18 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0