How to make an article selector from site structure

[achilehero]

Hi!

I need to create something similar to this product selector here:

http://www.hiab.com/Product-finder/

Can anyone, please, give me some hints in what should I use?
The basic idea is this: I have three columns. The first column displays level structure 1. When I select an item in the first column, the 2nd column should display the according 2nd level site structure and so on.

Any help is welcome.

Thanks in advance!

[juergen]

Hi

best thing might be 4 Tables and do this inside a Module. For displaying in frontend only that will be not so much to do. The way you thought is a nice one as well but needs lots of JS

[achilehero]

Hi! Yes, I need this just for the front end. But still, can you please be more specific in what you mean taht I should do?


Thanks!

[flip-flop]

I hope this will answer your question:

-> NAV_LIST_UL (Parameter)
-> New tag {LEVELX_ID} or alternatively Level-Lift

E.g. the version with level tags:

Code: Select all

<div class="navi-test">

Test: Level output: {LEVEL0_ID},{LEVEL1_ID},{LEVEL2_ID}

[PHP]

// ==== root level

  echo '<div class="submenu00">'.LF;
  echo '{NAV_LIST_UL:F,0,1,act_path,active,,,<span>|</span>}';
  echo '</div>';

// ==== first level
if ('{LEVEL1_ID}' != '0' ) {  
  echo '<div class="submenu01">'.LF;
  echo '{NAV_LIST_UL:F,{LEVEL1_ID},1,act_path,active,,,<span>|</span>}';
  echo '</div>';
}

// ==== second level
if ('{LEVEL2_ID}' != '0' ) {  
  echo '<div class="submenu02">'.LF;
  echo '{NAV_LIST_UL:F,{LEVEL2_ID},1,act_path,active,,,<span>|</span>}';
  echo '</div>';
}

[/PHP]
</div>

Knut

[achilehero]

Thanks, Knut. I guess I could use your example, but still, ... I think I cannot avoid JS. In your example, when I click a link from the first level it redirects me to that category in the website. Instead, I need the click to display the second level of navigation. I will see if an onclick function to add to that will work. But I guess I cannot use NAV_LIST_UL in this case, right?

[flip-flop]

Mhh, I don´t understand your problem, for me there is no need to use JS, unless you want to harcode the navigation messages.

However, I don't know the structure of the page, or your technical approach.

Knut

[achilehero]

I need something to work just like the example here: http://www.hiab.com/Product-finder/

As you can see, when I select a category in the first column, it displays the subcategories in the 2nd column. When I select something in column 2, it finds a product in column 3. And when I select the product in column 3, it takes me in the website to the corresponding page. Maybe I didn't understand very well your example, but from what I know, NAV_LIST_UL displays the navigation menu. So when I click a link in the first column it just takes me to that category in the website, instead of just opening the second level of navigation.

Do you understand what I tried to explain or should I be more specific?

Thanks!

[flip-flop]

In the example, the selection is done on a separate page, which should be no problem.

If the choice is to run on the master page, JS must be used.

From my point of view a Script must be written, which represents navigation in JS.

Knut

[marcus@localhorst]

From my point of view you need to render the full menu (from your starting point described above) in a contentpart via VCSS, I suppose ( http://www.phpwcms-howto.de/wiki/doku.p ... parameters ).
@Knut can take VCSS param take the A parameter to display articles in the menu? I don't know right now)
Then you have to rewrite the CSS of the flyoutmenu to fit your needs (without the :hove action), disable the IE htc to mimic the :hover function and write your own script to behave as you want.
If you get the full nested list rendered, then take a look here to step further -> http://www.alistapart.com/articles/complexdynamiclists/

[flip-flop]

@Marcus: The article navigation does not run in VCSS mode..
In addition, that is not further tragic, VCSS can be replaced with the mode " no TAG" for receiving the whole Navi tree.

VCSS only produced a small CSS statement and accesses a particular CSS file.
If these CSS statements connected to the NAV_LIST_UL "without TAG" the result in the FE is identical.

Knut