Custom dropdown in webhelp toolbar

[nickatwork]

Hi all,
I have a custom button in the webhelp toolbar, but I'd like to turn it in to a menu dropdown instead that has a couple of links. Basically, this is a method of allowing users to switch to different help versions. At the moment the button just launches a separate window with 3 buttons within it to open the right help.

I would like to implement something like this (http://www.scriptiny.com/2008/04/slidin ... down-menu/
) which is almost perfect, I'm not even sure if the hover effect will sit above the topic so I don't know if it will work.
But I'm not sure where to start. There are 4 different files, the JS file, the CSS, the htm that calls everything, and the image files.

Has anyone done anything like this? I can add the JS to the custom button - the image folder and CSS to the \Data\SkinXXX folder where the toolbar.js file sits so I figure any paths must be relative. But the 'call' that is made in the htm, I'm not sure where to put this code. The toolbar.htm file in the Skin folder doesn't look like any of that code sits in here...

any help appreciated.

Thanks,
Nick

[i-tietz]

Use a topic toolbar. Create a div at the top of each topic (masterpage / template), have the topic toolbar "float left" in it:
- Then you insert that dropdown (including its scripting code) after the toolbar, so it floats beside the topic toolbar.
- Alternative that I use: Generate a specific class of dropdown that positions the dropdown into the top right corner (and on top of the div). You will then have to add javascript code to make it react to resizing the window.

[nickatwork]

Thanks, I was thinking about this as well. Probably going to be the easiest solution.

Nick.

[straygoat]

I'm trying to create something similar - a css drop down menu with no javascript that will appear at the top of topics as an alternate way of navigation. Will the same tactic work? So far, I have created the css menu, but it doesn't appear when I add it to topics in Flare. Yet it works fine in a normal htm file opened in Chrome.

[nickatwork]

I would say yes, mine has worked though this menu uses JS too, so it's not a pure CSS solution. Add it within a master page, perhaps a test one, and see if you can get it functioning. I put the specific CSS I needed for my script in the master page rather than in my stylesheet at first - always a lot easier when getting it up and running for the first time.

[i-tietz]

aha ... and if you enter it into the masterpage, is the content the same in each topic? Or do you generate it dynamically via a script?

[wclass]

I've done something like this by adding the links to the CSS and javascript files to the master page, and then in the topics you just apply the appropriate styles from the CSS.
If it is working for you via a "normal" browser but not Flare, then I'd check that you haven't applied a master stylesheet at the target level that is overriding your links.

[straygoat]

Thanks, I will test it out on the master page and see how it goes.

[SGTechnicalAuthor]

Okay, I've tried a few things but with no joy:

• Made sure the target and project do not have set style sheets.
  Added the html for the css menu to a topic.
  Set the topic to use the css menu stylesheet.

Built target = no menu in the content, just the title.

I also tried adding the css menu content to the master page (after the body tag...did this in notepad), but again no luck.

Any ideas what I should try next?

[straygoat]

I solved this issue in another thread (with some help). Looks like the CSS menu needs to be applied to the htm files outside of Flare, after the build/publish process.