Preferences
auto-hide
mono-section
tooltips
animation:

NavBar Installation

Copy the "navbar" directory from the NavBar distribution to your web server, using for instance a ftp client. If you copied it directly in your document root then a URL like the one below would be valid and lead to the main JS file:

http://www.yourdomain.com/navbar/navbar.jss

In this case the path to NavBar will be "/navbar" (in red above). It is necessary to specify it before generating the menu because it uses the path to look for control icons.

Note that some web servers or browsers might not recognize the .jss extension (it is indeed a non-standard extension) and will not pass the right “content type”. If you experience any problems, please rename the file to, say, “navbar-all.js”, and load that file instead in the <script> tag.

Create a "setupmenu.js" file. You can put it anywhere you want, there's no need to put it under the /navbar path. This file will contain code that initializes and generates the menu. Following there is a commented sample. For a complete example you should view the source file "setupmenu.js" from the distribution, also see the source of this page.

_NavBar_url = "/navbar";

// helper function that disables the current page
function L(label) {
  if (_NavBar_pageID.toLowerCase() == label.toLowerCase())
    label = "!" + label;
  return label;
}

var menu = new NavBar(document.getElementById("content"),
                      document.getElementById("beforemenu"),
                      document.getElementById("aftermenu"));

// begin generation (add top control buttons)
menu.openMenu();

// a menu section
new NavSection(
  menu, // parent menu
  "a menu", // section label
  [
    [ L("Home"),     "home.html",     "Homepage",     "images/home.png" ],
    [ L("Products"), "products.html", "Our products", "images/products.png" ],
    [ L("Label"),    "url",           "A tooltip",    "images/icon.png" ]
  ]
);

// set some options
menu.prefs["animation"] = 3;    // "bloatware" ;-)
menu.prefs["auto-hide"] = true; // the bar will autohide

// end generation
menu.generate();

Some comments:

If a path to images is relative (i.e. "images/home.png") then it will be relative to your page, not to /navbar path.
You can provide PNG icons. Variable opacity will work, including in Internet Explorer.
For a list of all customization options (like menu.prefs["animation"]) see info about customization

As you can notice from the above code, we created a menu with a single section labeled "a menu" and with links to the pages "home.html", "products.html". Each of these pages should have the following structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- DOCTYPE _is_ important!  Don't forget it! -->

<html xmlns="http://www.w3.org/1999/xhtml"
      style="padding: 0px; margin: 0px">

  <head>
    <title>yourwebsite.com homepage</title>

    <!-- include the main script -->
    <script type="text/javascript" src="/navbar/navbar.jss"></script>

    <script type="text/javascript">
      _NavBar_pageID = "Home"; /* menu label of the current page */
    </script>

    <style type="text/css">
      /* import the navigation bar styles */
      @import url(/navbar/navbar.css);
    </style>

  </head>

  <body>

    <div id="beforemenu">
      [...] content displayed in the nav. bar, before the menu [...]
    </div>

    <div id="aftermenu">
      [...] content displayed in the nav. bar, after the menu [...]
    </div>

    <div id="content">
      <div>
        [...] here you include the page content [...]
      </div>
    </div>

    <!-- load setupmenu here so that it generates the menu -->
    <script type="text/javascript" src="setupmenu.js"></script>

  </body>
</html>

The menu will be created in the DIV with the ID "content". The other two DIV-s before it will be moved in the navigation bar, before the menu itself and after it. They are optional.