nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Implement navigation using Teamsite

cute_guy

Hi,

I have a requirement to implement navigation in the website.

When the users selects a particular header, the leftnav for that particular header should be displayed. When the users clicks on the menu in the left nav, the sub menus for that menu should expand and the index page for that menu should be displayed and also the menu should be highlighted in RED color.

When the submenu is selected, the content page for that sub menu will be displayed and the submenu, parent menu, header will be highlighted in RED color.

For each header there will be an left nav.
For each menu there will be an index page.
For each sub menu there will be an content page.

How do I implement using PTs?

For more information I have attached a word document.

Please suggest some ideas.

Thanks and Regards,
Ganesh

____________________
ENV: TS6.5,solaris

Find more posts tagged with

Comments

Sailesh

Hi Ganesh,

We have implemented this long time back for one of our client and though it was not best of solutions but it is working fine for the requirement.

The way we implemented it is :

Created Dcr with First-> second -> Third level of links, with each link we also provide the index page information for that link.

Then when we generate, we were generating as many number of html files as the links in our left navigation; with each having naming convention as leftnav_1_1_1.html which stands for first third level link for first link and first second level.

Not sure if I have explained it well or if this approach will suit your requirement and your up to your clients statisfaction.

cute_guy

Hi sailesh,

Thanks for the reply.

The requirement as explained in the document attached is

1) There will be headers A,B,C,D...
2) When header A is selected the left nav for header A should be loaded, left nav will have menus like A-1,A-2.A-3....
3) When menu in the left nav is selected say A-1, then the sub menus of A-1 which will be A-1-1, A-1-2 should be expanded and A-1 index page should be loaded.
4) When the sub menu A-1-1 is clicked, the content page of A-1-1.html will be loaded.

Suppose I have headers as one HTML and have several left nav html files for each header and use HTML include directive to include files in PT.

How do I dynamically load corresponding left nav html for the corresponding header like for Header A -> load left nav A html?

How do I dynamically load corresponding content page/index page for the corresponding menu/submenu like for menu A-1 -> load index page A-1 html?

No ajax codes should be used in these process.

Thanks and Regards,
Ganesh

____________________
ENV: TS6.5,solaris

two_column.rptdesign

pbose

This can be easily be implemented as a nested replicants.
Create a DCR for left navigation. Skeleton should be as follows -
********************************************************
[HTML]
Level One Menues

.................

.................

Level Two Menues

.................

.................

Level Three Menues

.................

.................

[/HTML]
********************************************************
In the presentation TPL for the left nav, which you will include in the main page TPL, check for the output file path. Loop through each level to find out where is the exact match. Once you find the match take appropriate actions.

Hope this makes things bit clear.

Thanks
-PB

jkm

Suppose I have headers as one HTML and have several left nav html files for each header and use HTML include directive to include files in PT.

How do I dynamically load corresponding left nav html for the corresponding header like for Header A -> load left nav A html?

How do I dynamically load corresponding content page/index page for the corresponding menu/submenu like for menu A-1 -> load index page A-1 html?

There can be various ways to implement this thing but as you have stated above, if you load the left Nav DCR instead of html tile then you know at page level which link needs to be highlighted.. I assume when you click on the top link your underneath navigation will change as well..

jkm

sry i pressed submit button twice and I dont know the way to remove the extra reply Smiley Sad

cute_guy

Requirement is...

Based on the header menus,the left nav will change and the menu/submenus in left nav which ever is selected the corresponding content/index page should be displayed.

Nidhi_Agrawal

Hi,

You can do this in 2 way..
(I am talking for centered part including left nav not for rest of the part of the page..)
1) For One DCT u can design 3 tpls naming as .
content_1.html (leftnav Item)
content_1_1.html (Sub item)
content_1_1_1.html (sub to sub item)

And for each DCT generate 3 htmls with these 3 tpls.
This DCT has values for left nav items and as well as center part content.
2) If u r comfortable with perl u can try for one tpl with if-else combination with tag..
Nidhi...

cute_guy

If Left Nav is based on the Header, then I need to create another tpl for header.

So for generating one page with header,left nav,menu and content at the center of the page, there has to be 4 tpls.

Can this be simplified like regenerating one or two tpls, changes the menu and the content of the page .

two_column.rptdesign