winxp.html
HTML Page
Encoding: UTF-8
 
Demonstrates the wonderful XP Explorer menus theme that NavBar provides as part of the default package.
 
» Buy this product! «

Windows XP Explorer menus

As you could have figured out already, Dynarch NavBar is very close to the all-so-known Windows XP Explorer menus. The missing part was a CSS file that defines a similar look. Well, there you have it! :-)

In order to make your NavBar look like WinXP menus, just load the /navbar/themes/winxp/skin.css skin, and set _NavBar_icons_url = "/navbar/themes/winxp/". View the source of this page for more details.

You can read more information about CSS files and custom icons in the NavBar documentation.

JavaScript actions

As of version 2.5, NavBar supports custom JavaScript action handlers for menu items in a very straightforward way. Instead of passing an URL, just pass a reference to a JavaScript function which is previously defined. In order to pass a custom argument to that function, put it in place of the “target” attribute. For example:

function showDate(param, item, section) {
    var menu = section.parent;
    // "menu" is a reference to the NavBar object
    // you can use it now i.e. to set preferences:
    // menu.setPref("auto-hide", true);

    // but let's show the date:
    alert(new Date() + "\nPassed argument is: " + param);
}
var menu = new NavBar(...);
new NavSection(menu, "Section label", [
   [ "Show date", showDate, "tooltip", "icon.gif", "custom argument" ]
]);

The above code creates an item that will call our custom function “showDate” when clicked. The function receives 3 arguments. Beware that the first one may be undefined if you don't pass it. In the code above though we pass it and its value is “custom argument”. The other two arguments are “item” -- a referenece to the TR element that holds the item elements, and “section” -- a reference to the NavSection object that this item belongs to.