NavBar files

As you can see from our installation page, in order to setup NavBar you need to load one JavaScript file and one CSS file from your browser. In this page we discuss it again with a little more detail.

Distribution files

The NavBar distribution archive contains the following files:

• navbar/ -- the main directory; you need to copy this on your server. The other files are samples and documentation.
  • navbar.jss -- the main NavBar file. You need to include this in your pages with a <script> tag.
  • navbar.css -- the main CSS file. You need to include this in your pages with a <link> or <style> tag.
  • icons/ -- a folder containing default icons for the NavBar control buttons.
    • arrow-down.png -- the “down” arrow.
    • arrow-left.png -- the “left” arrow.
    • arrow-right.png -- the “right” arrow.
    • arrow-up.png -- the “up” arrow.
    • blank.gif -- a 1x1 transparent GIF; required to display PNG icons in Internet Explorer
    • minus.png -- the “-” (collapse all) icon.
    • plus.png -- the “+” (expand all) icon.
    • sticky-off.png -- the “sticky” (auto-hide) icon, when “auto-hide” is off.
    • sticky.png -- the “sticky” (auto-hide) icon, when “auto-hide” is on.
    • sync.png -- the “synchronize” icon.
    You can easily use custom control icons without modifying the ones in your NavBar installation.
  • navbar.js -- the main NavBar file; available only if you purchased a developer license.
  • animation.js -- a generic Animation object; available only if you purchased a developer license.
  • interval.js -- a generic Interval object; available only if you purchased a developer license.
• samples/ -- folder containing sample files
• *.html -- the documentation files
• setupmenu.js -- NavBar definition file for the documentation.

Loading the files

As you can imagine, everything needed to run NavBar has been put under the “navbar/” subdirectory. Therefore, installing NavBar requires you to copy that subdirectory in a path on your server accessible from a browser. Further we will assume that you copied it in “/navbar/” in your server's document root, such that the following link should be valid and lead to the main stripped JavaScript file:

http://www.your-domain.com/navbar/navbar.jss

The part above in red is the “absolute URL relative to your server”, so to say, through which the NavBar files can be accessed from a browser. For correct working NavBar requires you to declare this path in a JavaScript variable, preferably before loading the “navbar.jss” file:

  <script type="text/javascript">
    _NavBar_url = "/navbar/";
  </script>
  <script type="text/javascript" src="/navbar/navbar.jss"></script>

Note that the value passed to _NavBar_url starts with a slash. While this is not required, it's highly recommended because then NavBar will be able to load its files regardless of the location of the current page within your website. You can omit the trailing slash if you want.

Then, you need to load a CSS file that defines how the NavBar should look like. The bundled CSS file looks like in this page and can be loaded for instance like this:

  <style type="text/css">
    @import url("/navbar/navbar.css");
  </style>

And now you are ready for the next stage, creating the NavBar.