Highlighting Current Menu

Discuss, ask and suggest about Usability and Accessability with CMS Made Simple
singhabhishek251
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Highlighting Current Menu

Post by 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.
chandra

Re: Highlighting Current Menu

Post by chandra »

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 8).
scooper
Forum Members
Forum Members
Posts: 242
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: Highlighting Current Menu

Post by 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:

Code: Select all

<a href="hats.html" class="{if $page_alias eq 'hats'} active {/if}">Hats</a>
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.
singhabhishek251
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

singhabhishek251 wrote: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
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

scooper wrote: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:

Code: Select all

<a href="hats.html" class="{if $page_alias eq 'hats'} active {/if}">Hats</a>
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?

Code: Select all

<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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3479
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Highlighting Current Menu

Post by velden »

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:
menu_01.jpg
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
Forum Members
Forum Members
Posts: 242
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: Highlighting Current Menu

Post by scooper »

singhabhishek251 wrote:

Code: Select all

<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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12708
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Highlighting Current Menu

Post by 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/
singhabhishek251
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

scooper wrote:
singhabhishek251 wrote:

Code: Select all

<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
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

Dr.CSS wrote: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
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

scooper wrote: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:

Code: Select all

<a href="hats.html" class="{if $page_alias eq 'hats'} active {/if}">Hats</a>
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":

Code: Select all

<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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3479
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Highlighting Current Menu

Post by velden »

That's not what you want probably.

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

Code: Select all

{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.

Code: Select all

<a href="#" class="{if $root_page_alias eq 'accessories'} activeparent{/if}">Accessories</a>
That said: use Menu Manager!
singhabhishek251
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

velden wrote:That's not what you want probably.

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

Code: Select all

{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.

Code: Select all

<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

Code: Select all

{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

Code: Select all

<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.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3479
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Highlighting Current Menu

Post by 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

Code: Select all

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
Forum Members
Forum Members
Posts: 38
Joined: Wed May 22, 2013 8:11 am

Re: Highlighting Current Menu

Post by singhabhishek251 »

velden wrote: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

Code: Select all

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.

Code: Select all

<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.
Locked

Return to “[locked] Accessability and Usability”