Blah blah
» Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis.

Advanced NavBar sample

This advanced sample shows some interesting aspects:

  1. You can make each section look different from the others by adding one or more custom CSS classes. (see section.setClass(...) calls in the page source). In our sample we add “custom secX” (where X is the section number). This way we can add some common values to all sections, and extra customization to each section separately.

  2. You can add a “toggle tab” button to certain sections (here we added them to all sections). That is an image with small arrows which remains visible when the NavBar is hidden so users will know which sections there are. To do this we call section.addToggleTab("img-expanded.gif", "imd-closed.gif").

  3. Section 3 is an HTML section (its contents is HTML available in page rather than normal NavBar items). For this to happen we passed the ID of a DIV element which is present in this page instead of the usual array of arrays that define items. Look in the source of this page at the definition of the third section.

  4. The second green control bar (at the bottom) includes a “sticky” button and hides the default arrow button. This is done with menu.closeMenu(true, true) right before menu.generate(). The meaning of the arguments are, in this order: “show sticky button” and “hide arrow button”.

  5. It sets the current menu section to section #2. This isn't done in the standard way but rather with the following code: menu.currentSection = section; (where section is a reference to the section section). This has the effect that when the “sync” button is closed, the menu will close all sections except #2.

This demo shows how you can customize the default CSS file. As you can see, the sections in this NavBar are as wide as the NavBar itself, which is required for the “toggle tab” images to look well when the NavBar is hidden.

The “toggle tab” buttons are equivalent in functionality to the arrow button from the top control bar—that is, they hide or show the whole NavBar. The nice thing about them is that you can show the section name even when NavBar is hidden.

Customizing the content div

Following the NavBar layout scheme, the page content must be in some DIV element. In this demo it is in a DIV with the ID=“content”. However, there are certain aspects of that DIV that you can't customize through CSS directly, because the way NavBar works. So in order to make customization possible, just include a second DIV (having here the ID=“content-body”) and customize that one.

The current demo uses the following CSS in order to customize the second DIV: 

#content-body {
  padding: 20px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #ddf;
}

So it adds some custom spacing, sets a light blue background and left and bottom borders.