dhtml menu javascript menu

If you have a question not answered here, please feel free to contact us. Please note that in order to understand the answers it is recommended that you walk through the rest of our documentation found in the menu.

While the page is loading, I can see the UL contents. Is this supposed to happen? (^^ toc ^^)

Yes and no. We don't want it to happen, but it happens because the menu is defined in plain HTML. However, there are simple solutions to avoid the problem.

Give the UL the style “display: none”. This is the simplest workaround and you can apply it by defining the toplevel UL element like this:
```
<ul id="menu" style="display: none">
```
Expectedly, it will hide the UL element; this will have no effect on the menu itself, which means that the menu will appear OK after the page finished loading, when DynarchMenu.setup is called.

There is an important drawback: browsers that support CSS and don't support JavaScript--perhaps because it was disabled by end-user--will fail to display the UL, because it was hidden. The next solution deals with it.
Set “display: none” from JavaScript. As you can imagine, this will overcome the drawback of (1), because if a browser supports JavaScript chances are that it will support DynarchMenu, so it's good to hide the UL. Here's how we can do that:
```
<script type="text/javascript">//<![CDATA[
  document.writeln("<style type='text/css'>#menu { display: none; }</style>");
//]]></script>
<ul id="menu">
  ... menu contents here ...
</ul>
```
Note that it's not very orthodox, because we're writing a <style> tag inside the document body. It would probably be better to put the SCRIPT part in the document head. But nevertheless, it does the job and does it well. So what it does? It dynamically writes a small CSS section that specifies that the element having the id="menu" (this is the “#menu” selector) should not be displayed. Because it's done from JavaScript, it's clear that browsers with no JavaScript support will display the UL, which is good because the menu won't work anyway.

How can I remove the icon space? I don't use any icons. (^^ toc ^^)

If you don't use icons at all, it indeed makes sense to remove the icon space and it's very easy. Just add the following lines somewhere in your CSS code, but after loading the DynarchMenu skin:

div.dynarch-popup-menu tr.item td.icon img,
div.dynarch-popup-menu tr.item td.icon div {
  width: 0;
}
div.dynarch-popup-menu tr.item td.icon {
  width: 0;
}

If you do this, no icons may appear in any menu. Sometimes this may not be desirable—perhaps you need to include icons in certain popups and no icons in others. So you can instead use the following code:

div.noicons tr.item td.icon img,
div.noicons tr.item td.icon div {
  width: 0;
}
div.noicons tr.item td.icon {
  width: 0;
}

and add the "noicons" class name to the UL elements that define popups where you don't want icons, like this:

<ul class="noicons">
  <li>Item without icon</li>
  ...
</ul>

Can I use DynarchMenu to create a toolbar? (^^ toc ^^)

Well, check for yourself. :-) We say you can.

A menu with hundreds of items shows up too slow, can I do anything about it? (^^ toc ^^)

We considered the possibility of really big menus and we added a configuration parameter that helps a lot. Check our page about customization and look for the “lazy” parameter. In short, it features a technique called “lazy initialization” which allows the menu to appear instantly, no matter how many items does it have.

How can I change fonts in menu items? (^^ toc ^^)

» Theory

The fonts in DynarchMenu, like the colors and backgrounds, are completely customizable through CSS. As described in the Skins section, the CSS files are split into 2 types: “layout” files, defining only borders, padding, margins and fonts, and “look” files, defining colors and backgrounds. The same layout file can be used for multiple skins. For instance, the Win98, Win2k, Modern and System skins, all use “hmenu-3d.css”. Since the fonts are the same in all these skins, it made sense to only define them in the layout file.

But wait, “hmenu-3d.css” doesn't define any fonts. That's because it includes the more generic “hmenu.css” (this is the basic layout file, included directly or indirectly by all skins). In “hmenu.css” we can see the following CSS rule (indented here for clarity):

div.dynarch-horiz-menu table, div.dynarch-popup-menu table
{
   font: 11px tahoma,verdana,sans-serif;
}

Modifying the above line will change fonts in (almost) all skins. Why “almost”? Because skins can override it; for instance, we are using this in our Aqua skin in order to provide a font that more accurately resembles the wonderful Mac fonts:

div.dynarch-horiz-menu table, div.dynarch-popup-menu table
{
   font-family: "Lucida Grande","trebuchet ms",verdana,sans-serif;
}

The above lines only override the font family, keeping the same size as defined in “hmenu.css” (11px). This works because “hmenu.css” is imported before the above CSS rule.

» Practice

So if you want to modify fonts, it turns out you have several options:

Change hmenu.css or skin files directly. This seems to be the easiest, but has the disadvantage that you need to backup the file if you upgrade your DynarchMenu installation.
Write a different file that customizes your favorite skin. We recommed this because you don't change DynarchMenu files directly. Instead you only create a new file which imports the DynarchMenu skin and adds additional rules to match your taste.

Here's an example of how you could implement #2, assuming that your DynarchMenu installation is located in "/hmenu/". You hate the fonts in Aqua so you thought you should “fix” them:

@import url("/hmenu/skin-aqua.css");

div.dynarch-horiz-menu table, div.dynarch-popup-menu table
{
   font: 20px Arial,sans-serif;
}

Save the above file in, say, "/my-dynarch-menu-skin.css", and in your HTML pages, instead of loading "/hemu/skin-aqua.css" just load "/my-dynarch-menu-skin.css". As you can see, at the beginning of the CSS file we import the DynarchMenu skin, which in turn imports the right layout files, so you only need to load one CSS file. The above “skin” is based on Aqua and looks like it with the difference that it has some really big fonts.

Can I avoid flickering in IE with the Aqua/Rain skin? (^^ toc ^^)

Fortunately, yes (I can say this after spending literally days of investigation). IE has a broken cache. Images linked from CSS are requested from server each time they are displayed. A thorough analysis can be found on my website.

Finally, the solution is to preload all images that are linked from DynarchMenu CSS files. To make things easier, DynarchMenu includes some plain text files that list all the images included by every skin; using these files you can easily write a server-side script that preloads them. Here's for instance how “I-skin-aqua.css.images” looks like:

img/aqua/rarrow-hover.gif
img/aqua/normal-bg.png
img/aqua/active-bg.png
img/blank.gif
img/aqua/rarrow.gif
img/shadow.png
img/rarrow-hover.gif
img/rarrow.gif
img/aqua/hover-bg.png
img/aqua/right-bg.png
img/aqua/left-bg.png

(the “I-*.images” files are in the “src/” subdirectory from your DynarchMenu distribution, and are named by a simple rule: “I-skin-name.css.images”, where “skin-name” is the name of the CSS file, without the “.css” extension.)

The “I-*.images” files list all images that should be preloaded by the page in order for it to work properly with Internet Explorer. Preloading the images simply means writing the following code somewhere in your page:

<div style="display: none">
  <img src="/hmenu/img/aqua/normal-bg.png" alt="" />
  <img src="/hmenu/img/aqua/active-bg.png" alt="" />
  [ ... ]
</div>

The above can be done easily with any server-side scripting language, or even manually (but I personally think that automating things is the way computers should be used). Just prepend to any image listed in the “I-*” file the path to your DynarchMenu installation.

Please note that Microsoft itself recommends preloading. As you can see at the Microsoft website, this bug only happens in IE 5.5 or later (it wasn't there in 5.0) and it is not a bug but, instead, it's something done “by design” (this means “intentional”, right?) by the IE team. Microsoft will not fix the cache bug; the cache bug does not exist. Instead, you are expected to fix your stuff, and the recommended way is preloading the images. Thank you Microsoft for making things so much easier for you.

UPDATE 2.7: — Starting with version 2.7, DynarchMenu includes a function that makes image preloading much easier. You just need to include the following code just before closing the </body> tag:

  <script type="text/javascript">
    DynarchMenu.preloadImages(new RegExp("^/hmenu/"));
  </script>
</body>

The above assumes that your DynarchMenu is installed in "/hmenu/", and it will preload all images that are defined in any CSS files loaded from that location.

Frequently asked questions

» Theory

» Practice