In the menu above, the links have been crafted to work more like "real" links in a Web page; i.e., you can right click on them and receive the normal link context menu (open in new window, save target, etc.); they will report the HTTP_REFERER to server logs, and pressing the tab key will rotate the visible cursor through the visible links of the page (but not through links in menus currently hidden).
The tradeoff for this functionality is that you must use ItemClass definitions for your menu items; all of the colors and font stylings for the menu items must be defined via ItemClass definitions. If you are unfamiliar with the use of CSS class name definitions in HierMenus 6, this mini-tutorial should bring you up to speed:
Additionally, the work around itself is not perfect; there are still small amounts of space within the menu items themselves that are still not usable as standard links (specifically, the space taken up by the item's ItemPadding and the space around the more image). Finally, the work around as we've implemented it works only for later (DOM-capable) browsers.
To implement the work around that is being used in the above menu, you must craft your links as regular HTML links (I.E., using enclosing <a>...</a> tags in your DisplayText settings, this is similar to the issue discussed in FAQ #2), and then style both the menu items and their links via ItemClass settings. More specifically:
Add this JavaScript code to your menu item configuration file. It must be present somewhere before your first call to UpdateDefaults. Install either the function "for the optimized code" or "for the verbose code," depending on how you've deployed the scripts; but not both!
// for the optimized code:
function HM_fc_AdjustLink() {
if (HM_DOM && this.oq) {
var theLink = this.oq;
if (theLink&&!(/^http/i.test(theLink))&&this.pi) {
if (theLink.indexOf("javascript:")==-1) theLink = this.pi+theLink;
}
this.qk = '<a href="'+theLink+'">'+this.qk+'</a>';
}
}
// for the verbose code:
function HM_fc_AdjustLink() {
if (HM_DOM && this.LinkURL) {
var theLink = this.LinkURL;
if (theLink&&!(/^http/i.test(theLink))&&this.BaseURL) {
if (theLink.indexOf("javascript:")==-1) theLink = this.BaseURL+theLink;
}
this.DisplayText = '<a href="'+theLink+'">'+this.DisplayText+'</a>';
}
}Note that the above procedure automatically wraps your current menu item descriptions in standard HTML anchor tags. If your descriptions already contain additional HTML, then this might be problematic; you may need to instead manually adjust the menu item definitions or the CSS below. Or both.
Next, add CSS definitions to your page, providing the appropriate styling for the link items. You'll need to define both on and off classes, and additionally you will need to define a and a:hover settings for the classes that are identical to the class definitions themselves. Something like this:
<style type="text/css">
.hm_item,
.hm_item a,
.hm_item a:hover
{color:white; background-color:black; font-family:Verdana, Helvetica, sans-serif;
font-size:12px; font-weight:bold; text-decoration:none; font-style:normal;
display:block}
.hm_item_over,
.hm_item_over a,
.hm_item_over a:hover
{color:black; background-color:white; font-family:Verdana, Helvetica, sans-serif;
font-size:12px; font-weight:bold; text-decoration:none; font-style:normal;
display:block}
</style>Be sure to add the display:block setting to the definitions; to ensure that the resulting links extend for the width of the menu item.
Finally, turn on the whole process by adding these statements to your UpdateDefaults call in your menu configuration file:
HM_OnCreateItem:HM_fc_AdjustLink,
ItemClass:"hm_item",
ItemClassOver:"hm_item_over",
ItemClassSelected:"hm_item_over",If you've setup separate Selected colors, then you will need to add CSS definitions and adjust the ItemClassSelected setting accordingly; in the above example we simply set the Selected settings to be the same as the Over settings.
Peruse the configuration file for the above example to see how we did it on this page: