How to link between targets within a "master" home screen?

[hmtebben]

I'm developing a HMTL5 TopNav output for documentation of three different products, and I'm trying to figure out an elegant and straightforward way to organize and present these three different products to our users.

The main difference between the products are branding and a small amount of unique features. Obviously, I'm able to single-source a great chunk of content very successfully using snippets and conditions. But I'm not satisfied with the way the information is displayed to our users. Currently, my team's go-to method for situations like this is to place the snippets into drop-downs, name the drop-downs as the specific branding, and condition the snippets to only show the appropriate content in each drop-down. I have several issues with this current method, but at least it's functional and easy to implement. I don't like how users have to click on a drop-down on every topic just to view the appropriate brand. I would love a way to allow the user to make a selection of their brand on the home page and have it persist the entire time they're in the website.

While looking through the MadCap customer showcase for inspiration, I found https://docs.illumio.com/core/21.1/Content/Home.htm as an example of an HTML5 TopNav project, and the drop-down selectors on illumio's home page really caught my eye. Looking at the URL, I can see that selecting an option in the drop-down brings me to a separate website. I'm assuming these websites are all in the same project and just use different targets. This is almost perfect for what I want to try in my project, but I'm at a complete loss on how this was achieved.

I'm imagining I would have three (perhaps four?) targets from my one project with one "master" home screen for all three brands. If I include a drop-down similar to illumio's example on the home screen, any user can immediately select their brand and continue through that target without having to constantly reselect the brand. And the home button will always bring the user to the same home page regardless of which brand they initially selected. I like this idea a lot more than having three different drop-downs on every single topic.

I've managed to figure out how to include a drop-down similar to illumio's, but I can't actually link the options to anything. Here's the code I found online:

Code: Select all

<select>
	<option>Brand 1</option>
	<option>Brand 2</option>
	<option>Brand 3</option>		
</select>

As one final note, I suppose I could simply use the native MadCap Flare drop-downs and include hard links to the different target URLs, but that would not be ideal.

Can anyone offer any assistance?

[Psider]

Poking around in the Developer Tools Sources tag, it looks like the dropdowns are added by custom javascript, and hard coded urls are stored in another javascript which is used to populate the list. Do you have a friendly developer who could help you implement something similar?

[doc_guy]

I have a hand-coded home page that creates the links to the sub-folders for the different projects. It's not elegant, per se, but it gets the job done for us.

[trent the thief]

The JS on their site is pretty "generic" in that it isn't special or particularly unique except that it works together. Bet you a dime you can find almost this exact functionality on a Javascript site either offered freely or at less cost than bringing in a consultant for a few hours of basic coding.