NavBar Customization

The look is completely customizable by changing the CSS file. Aside for this, there are several customization options that require a bit of JavaScript code. Supposing you created the menu with the following command:

var menu = new NavBar("content");

You can modify the following customization options:

1. menu.prefs["animation"] = 0 | 1 | 2 | 3

   The meaning is "0" for no animation at all, "1" for section-only animation, "2" for menu-bar animation and "3" for "bloat" animation (when hiding the menu the whole page will animate). I strongly recommend "2" (the default value).

2. menu.prefs["mono-section"] = true | false

   When mono-section is true only one section will be visible at a time. Selecting another section will hide the currently visible onle.

3. menu.prefs["generate-anim"] = true | false

   If this is true then the menu will be shown animated at start-time.

4. menu.prefs["auto-hide"] = true | false

   If this is true then the menu will be an "auto-hide" menu, meaning then when the mouse cursor lefts the menu area the menu will automatically hide.

5. menu.prefs["tooltips"] = true | false

   If true (default) then the navigation bar will provide tooltips.

6. menu.prefs["icon-width"] = 20
menu.prefs["icon-height"] = 14

   Allows you to configure the dimension of the icons. If you provide images with different dimensions then they will be scaled to meet the requirements configured with the above lines.

7. menu.prefs["link-prefix"] = "/foo/bar/"

   If this option is set then all links that the menu points to will have the given prefix (for instance "/foo/bar/").

8. menu.prefs["cookie-path"] = "/bar/foo/"

   Sets the path for the cookie that the menu stores. The cookie is used to remember the menu state on subsequent requests.

9. menu.prefs["cookie-exp"] = 15

   Configures a cookie expiration time. If none set (default) then the cookie will expire when the browser is closed (at end of session). The example above instructs the cookie to expire in 15 days.

10. menu.prefs["link-target"] = "_blank"

    Sets the target for the links in the menu. This should be a frame name. Don't set if you want all links to open in the current window/frame.

11. menu.prefs["nb-frames"] = 15
menu.prefs["ns-frames"] = "auto"

    The number of frames for the navigation bar (nb-) or section (ns-) animation. The higher this number is, the slower the animation. If "auto" (default) is set for ns-frames then the number of frames is computed based on the section height.

12. menu.prefs["nb-fps"] = 45
menu.prefs["ns-fps"] = 100

    The number of frames per second that the bar (nb-) or section (ns-) animation will show. The higher this number, the smoother the animation but higher load on the CPU. The default values should be okay for most systems.

13. menu.prefs["home-href"] = "http://dynarch.com/mishoo/menubar.epl"
menu.prefs["home-title"] = "NavBar project page"
menu.prefs["home-text"] = "NavBar"

    This preference option allows you to customize the link that appears in the menu header/footer and its tooltip. The example above shows the default options.

14. menu.prefs["no-controls"] = false

    Set this to true in order to hide the "global menu controls", that is, the "+", "-" buttons that operate on all sections, and the left/right arrows that close/open the menu.

15. menu.prefs["no-disable"] = false

    If you set this to true then NavBar won't disable the current item. If you want the current item to look active but not be disabled, pass "item-disabled" (or a custom string) here and that item will gain the additional string in the class name. Using this you can define a custom look for it in the CSS. "item-disabled" is the default class name defined in navbar.css and makes the item look "active".

16. menu.prefs["fewer-hover"] = true
menu.prefs["no-item-hover"] = true

    Controls the amount of "mouseover" effects. In certain occasions, you might not want hover effects, so you can disable them here. If you set "fewer-hover" to true then only menu items will have mouseover effects. If you set "no-item-hover" to true then no mouseover effects will be defined on items. Set them both true if you wish to disable all mouseover-s.