Highlighting Current Menu

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

I want to highlight current menu in my CMS MS website, I have created my own HTML template for home and inner pages and I am applying same inner page template to all inner pages, but I am unable to highlight the current menu item because navigation I have used is static in template itself.

Is there any tag, which can be used for highlighting current menu? Until now I am creating separate template for all pages and then applying that to related inner page for highlighting current menu, which is lengthy process because If I have 50 pages then I do not want to crate 50 template and then 50 pages.

Please let me know if any confusion in question.

chandra · **Posted:** Wed Jun 11, 2014 1:43 pm

Why do you want to have static menus?

MenuManager module is built to handle most possible situations. And using MenuManager means too highlight the current menu entry.

But not using MenuManager means to use only the half CMSMS power

.

scooper · **Posted:** Wed Jun 11, 2014 2:18 pm

You can use Smarty conditionals in your template to detect which page you're on and apply a class.

For example {$page_alias} will tell you what the alias of the page you're on is, so you could write out your menu like:

\$1:

If you want to find make the parent of a subpage active then you'll need to find the alias of the parent page. You can either use CGExtensions which includes a tag for that you can write a user defined tag.
Rolf has an example of a UDT here: https://www.cmscanbesimple.org/blog/get-a-pages-root-parents-alias

You can do more complicated things using smarty in the templates but you should probably be looking at using MenuManager if you want to do much more than this.

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

singhabhishek251 \singhabhishek251:

I want to highlight current menu in my CMS MS website, I have created my own HTML template for home and inner pages and I am applying same inner page template to all inner pages, but I am unable to highlight the current menu item because navigation I have used is static in template itself.

Is there any tag, which can be used for highlighting current menu? Until now I am creating separate template for all pages and then applying that to related inner page for highlighting current menu, which is lengthy process because If I have 50 pages then I do not want to crate 50 template and then 50 pages.

Please let me know if any confusion in question.

The design that I want for my menu is different and I am unable to get same from menu manager at desired location. But still I will give one more try with menu manager as it will be easy in future as well, if I can learn to play with this because I have faced this issue for many of my website like this.

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

scooper \scooper:

You can use Smarty conditionals in your template to detect which page you're on and apply a class.

For example {$page_alias} will tell you what the alias of the page you're on is, so you could write out your menu like:

\$1:

If you want to find make the parent of a subpage active then you'll need to find the alias of the parent page. You can either use CGExtensions which includes a tag for that you can write a user defined tag.
Rolf has an example of a UDT here: https://www.cmscanbesimple.org/blog/get ... ents-alias

You can do more complicated things using smarty in the templates but you should probably be looking at using MenuManager if you want to do much more than this.

Thanks for the reply, I think this is a perfect solution for me if I can get this as explained because I got tired by searching into Google with different search terms and then I remembered about this forum to get help. Thanks for your time. Just for confirmation and better understanding I am writing what I understood from your post, please confirm once if it is correct. Is this a correct code as given below, where "active" is a class name?

\$1:

<a href="about-us.html" class="{if $page_alias eq 'about-us'} active {/if}">About Us</a>
<a href="services.html" class="{if $page_alias eq 'services'} active {/if}">Services</a>
<a href="contact.html" class="{if $page_alias eq 'contact'} active {/if}">Contact</a>

Thanks once again.

velden · **Posted:** Thu Jun 12, 2014 3:23 pm

\$1:

The design that I want for my menu is different and I am unable to get same from menu manager at desired location.

I built only one site where I did NOT use menu manager:

$1:

menu_01.jpg [ 143.31 KiB | Viewed 7163 times ]

And probably, if I really wanted it to, I could have used Menu Manager.

I don't see why you can't use it for your website. Note that the Menu Manager templates make it possible to almost every menu that has some logical structure.

scooper · **Posted:** Thu Jun 12, 2014 4:05 pm

singhabhishek251 \singhabhishek251:

\$1:

<a href="about-us.html" class="{if $page_alias eq 'about-us'} active {/if}">About Us</a>
<a href="services.html" class="{if $page_alias eq 'services'} active {/if}">Services</a>
<a href="contact.html" class="{if $page_alias eq 'contact'} active {/if}">Contact</a>

Velden is right that menu manager is well worth getting to know and might save you time later on - but that code looks ok to me - give it a go.

And btw - since we're in the accessibility section of the forum - it's not the issue it once was but it's best practice not to have immediately adjacent links. You should make sure you put a separator between your menu items.

Dr.CSS · **Posted:** Thu Jun 12, 2014 5:41 pm

What you are trying to do is exactly what menu manager does, I haven't found a menu that can't be done using Menu Manager...

I made one that will do this menu...

http://www.alinga.com.au/

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

scooper \scooper:

singhabhishek251 \singhabhishek251:

\$1:

<a href="about-us.html" class="{if $page_alias eq 'about-us'} active {/if}">About Us</a>
<a href="services.html" class="{if $page_alias eq 'services'} active {/if}">Services</a>
<a href="contact.html" class="{if $page_alias eq 'contact'} active {/if}">Contact</a>

Velden is right that menu manager is well worth getting to know and might save you time later on - but that code looks ok to me - give it a go.

And btw - since we're in the accessibility section of the forum - it's not the issue it once was but it's best practice not to have immediately adjacent links. You should make sure you put a separator between your menu items.

Thanks.
May be I have never worked with menu manager or I think I assumed that it will not work that way made me struggle a lot, but thanks for the support that I got here. I am going to explore menu manager.
Thanks again for saving me with this solution and this has saved a lot of time for me because I was not having time for experiment at this time, but going to learn after this website.

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

Dr.CSS \Dr.CSS:

What you are trying to do is exactly what menu manager does, I haven't found a menu that can't be done using Menu Manager...

I made one that will do this menu...

http://www.alinga.com.au/

The website menu reference that you have given is really wonderful and I have not imagined such a beautiful menu design until now.
I am going to bookmark your website for future reference and going to give some extra time for menu manager also to understand it.

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

scooper \scooper:

You can use Smarty conditionals in your template to detect which page you're on and apply a class.

For example {$page_alias} will tell you what the alias of the page you're on is, so you could write out your menu like:

\$1:

If you want to find make the parent of a subpage active then you'll need to find the alias of the parent page. You can either use CGExtensions which includes a tag for that you can write a user defined tag.
Rolf has an example of a UDT here: https://www.cmscanbesimple.org/blog/get ... ents-alias

You can do more complicated things using smarty in the templates but you should probably be looking at using MenuManager if you want to do much more than this.

Hi,
I am sorry to disturb you once again.
For highlighting parent of subpage can I use code as given below, where hats is "subpage" of "accessories":

\$1:

<a href="hats.html" class="{if $root_page_alias eq 'accessories'} active {/if}">Hats</a>

I think this is wrong, can you provide right one for highlighting parent.

I was unable to try this live in my project because it is in initial phase itself, so I thought to ask you because once after starting I need not to struggle and switch to anything else. That is the reason I was trying to clear my doubts before finalizing anything.
Thanks for the help, I have started loving CMS MS because of you guys support else I was fearing from using this.
I am a regular WP user, but I think now that CMS MS is also easy to handle.
In the mean time if anyone can share some tutorial with me about using menu manager and using our own menu template, then it would be great help. I also wanted to learn how to use our own menu template with menu manager.

velden · **Posted:** Thu Jun 19, 2014 6:59 am

That's not what you want probably.

Note that you need to create the UDT first AND you need to call it first.

\$1:

{get_root_page_alias}

Then you want to check if you need to highlight the 'active parent'. Then you should not add a class to the child.

\$1:

<a href="#" class="{if $root_page_alias eq 'accessories'} activeparent{/if}">Accessories</a>

That said: use Menu Manager!

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

velden \velden:

That's not what you want probably.

Note that you need to create the UDT first AND you need to call it first.

\$1:

{get_root_page_alias}

Then you want to check if you need to highlight the 'active parent'. Then you should not add a class to the child.

\$1:

<a href="#" class="{if $root_page_alias eq 'accessories'} activeparent{/if}">Accessories</a>

That said: use Menu Manager!

I have created UDT, but where to place this

\$1:

{get_root_page_alias}

, I mean how to call this?
Please bear with me as I am new to this CMS MS, but getting interest with all your support here.

I have Placed in header of template: {get_root_page_alias}
Then, below code I am using in Navigation, but it is not highlighting 'About Us' tab

\$1:

<li><a href="index.php?page=ceo-president-message" class="{if $root_page_alias eq 'about-us'} active{/if}">CEO & President Message</a></li>

Please guide me how to write this if I want to highlight (active) Parent tab while I am on child and when I am on grandchild.

velden · **Posted:** Fri Jun 20, 2014 7:25 am

Note that the <head> section of a template is processed AFTER the </__body> section.

I would suggest to put the {get_root_page_alias} at the VERY top of the page template. So really as the first line of template before anything else.

Then somewhere in your </__body >you could just put

\$1:

root: {$root_page_alias}

and see of it actually prints a value.

If it does, you can start using conditional statements inside menu.

That said: use Menu Manager!

singhabhishek251 · **Joined:** Wed May 22, 2013 8:11 am **Posts:** 38

velden \velden:

Note that the <head> section of a template is processed AFTER the </__body> section.

I would suggest to put the {get_root_page_alias} at the VERY top of the page template. So really as the first line of template before anything else.

Then somewhere in your </__body >you could just put

\$1:

root: {$root_page_alias}

and see of it actually prints a value.

If it does, you can start using conditional statements inside menu.

That said: use Menu Manager!

Yes, it is printing the value.
But I do not know how to use conditional statements inside menu for this.

I am placing like below, but no luck. Here I want to highlight "About Us" tab when some one is at "CEO & President Message" tab these are parent and child respectively.

\$1:

<li><a href="index.php?page=ceo-president-message" class="{if $root_page_alias eq 'about-us'} active{/if}">CEO & President Message</a></li>

I will definitely learn menu manager, but this is not good time for me as new experiments will take more time.

Highlighting Current Menu

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Share On:

Who is online