Hello,
I'm using a topnav template and trying to bring our Flare output inline with our main website. One of the characteristics of our site is that the topnav menu bar item changes color once selected and stays that way until another option is selected.
I've seen solutions in regular css/html/javascript by adding some javascript that queries elements by id and adds a 'selected' class that is described in the CSS. However, Flare generates the html and I'm unable to assign ids to the html elements for the javascript to refer to.
Just using a:active won't work as that's only valid when the mouse is pressed and it changes back once released.
Anyone tried this and succeeded using a topnav template?
Perhaps there's a way of changing the element class without using an id? Or perhaps I need to use jquery?
Grateful for help.
Ian
Change color of selected topnav menu item
-
minicyclist
- Propeller Head
- Posts: 60
- Joined: Wed Apr 09, 2014 3:51 pm
-
Jbleasdale
- Propeller Head
- Posts: 58
- Joined: Tue Mar 21, 2017 3:35 pm
Re: Change color of selected topnav menu item
I've been exploring some similar things for a future project.
If you are talking about the top nav menu items, the best thing to do is use jquery to search for elements that have attributes instead of IDs (as you can't add ID's from Flare). Each Top Nav item has an mc-data-id which is totally unique and comes from the TOC, but gets added as part of the compile process. You can track them down through the js files Flare generates on compile, but that's extremely boring and its much easier to inspect the HTML and you should be able to find it easily enough. (They are usually mc-data-1 through x from left to right as you look at the top nav menu items).
Then you can use to find the element and add the class to the found element after that.
Haven't tried exactly what you are doing, but theoretically it should work.
Let us know the outcome.
If you are talking about the top nav menu items, the best thing to do is use jquery to search for elements that have attributes instead of IDs (as you can't add ID's from Flare). Each Top Nav item has an mc-data-id which is totally unique and comes from the TOC, but gets added as part of the compile process. You can track them down through the js files Flare generates on compile, but that's extremely boring and its much easier to inspect the HTML and you should be able to find it easily enough. (They are usually mc-data-1 through x from left to right as you look at the top nav menu items).
Then you can use
Code: Select all
$("[attribute=value]")Haven't tried exactly what you are doing, but theoretically it should work.
Let us know the outcome.
-
minicyclist
- Propeller Head
- Posts: 60
- Joined: Wed Apr 09, 2014 3:51 pm
Re: Change color of selected topnav menu item
Thanks for the quick reply, sounds promising.
Before I go ahead, I also realised that I'd need to update the topnav item when interacting with the side menu. The side menu and topnav are different versions of the same TOC, so I'd need to highlight a topnav item if I browse to the corresponding section using the side menu. Plus, the topnav item would need to stay highlighted if I browse to any topics below that section. So for example, if I have a section (top level topic) called 'Resources', opening any topic in that section would need to cause a corresponding highlight of 'Resources'.
Does that sound feasible?
Thanks,
Ian
Before I go ahead, I also realised that I'd need to update the topnav item when interacting with the side menu. The side menu and topnav are different versions of the same TOC, so I'd need to highlight a topnav item if I browse to the corresponding section using the side menu. Plus, the topnav item would need to stay highlighted if I browse to any topics below that section. So for example, if I have a section (top level topic) called 'Resources', opening any topic in that section would need to cause a corresponding highlight of 'Resources'.
Does that sound feasible?
Thanks,
Ian
Re: Change color of selected topnav menu item
Possibly - the html tag contains has an attribute data-mc-toc-path; e.g.minicyclist wrote:Before I go ahead, I also realised that I'd need to update the topnav item when interacting with the side menu. The side menu and topnav are different versions of the same TOC, so I'd need to highlight a topnav item if I browse to the corresponding section using the side menu. Plus, the topnav item would need to stay highlighted if I browse to any topics below that section. So for example, if I have a section (top level topic) called 'Resources', opening any topic in that section would need to cause a corresponding highlight of 'Resources'.
Does that sound feasible?
Code: Select all
<html ... data-mc-toc-path="Features|Additional Features" ... >-
minicyclist
- Propeller Head
- Posts: 60
- Joined: Wed Apr 09, 2014 3:51 pm
Re: Change color of selected topnav menu item
Thanks Dave. Good to know. I'll give it a go when time permits.
-
cdschroeder
- Sr. Propeller Head
- Posts: 189
- Joined: Mon Feb 22, 2016 9:18 am
- Location: Cincinnati, OH
Re: Change color of selected topnav menu item
Did any of you succeed in doing this? Marketing wants us to highlight the first-level menu item that the selected topic falls under. Ex:
I'm at a total loss on how to make that happen within the constraints of Flare.
I'm at a total loss on how to make that happen within the constraints of Flare.
You do not have the required permissions to view the files attached to this post.
Casey
Re: Change color of selected topnav menu item
I am in the same boat. I asked MadCap support last year about this: They told me it's not possible - at least not with any of the built-in Flare features. The only way to go would probably be a jQuery solution as described by Dave Lee.cdschroeder wrote: I'm at a total loss on how to make that happen within the constraints of Flare.
Re: Change color of selected topnav menu item
You'd definitely need to write your own script for this.
For example:
1) Get the contents of the "data-mc-toc-path" attribute on the html tag; e.g.
$("html").attr("data-mc-toc-path")
2) Slice that string to get the text up to the first "|" character; e.g. so if the path is "General|Things|Stuff" then you just get the "General".
3) Compare that text (e.g. "General") to the text in the top level items in your menu. If you get a match, then highlight that item in the menu (e.g. add a "active" or "selected" class).
Or for a plan B, if you have a breadcrumbs proxy in the topic, then in step (1) you could grab the text from the first link in the breadcrumbs, and compare that to your menu items.
The script wouldn't be that tricky - but sorry, I can't write it for you!
For example:
1) Get the contents of the "data-mc-toc-path" attribute on the html tag; e.g.
$("html").attr("data-mc-toc-path")
2) Slice that string to get the text up to the first "|" character; e.g. so if the path is "General|Things|Stuff" then you just get the "General".
3) Compare that text (e.g. "General") to the text in the top level items in your menu. If you get a match, then highlight that item in the menu (e.g. add a "active" or "selected" class).
Or for a plan B, if you have a breadcrumbs proxy in the topic, then in step (1) you could grab the text from the first link in the breadcrumbs, and compare that to your menu items.
The script wouldn't be that tricky - but sorry, I can't write it for you!