HTML::Widget::SideBar 1.02

HTML::Widget::SideBar can creates the HTML (and possibly some Javascript) for a navigational or otherwise active (hierarchical) sidebar for a web page.

SYNOPSYS

use HTML::Widget::SideBar;
use CGI; # Or something like that.

# We are going to create a sidebar in which only the active (clicked) branch
# is visible.
my $tree = HTML::Widget::SideBar->new;
$tree->setToggleAction;

foreach (1..3) {
my $list = $tree->append(value => "list$_");
$list->append(value => "aaa$_", URL => "http://localhost/$_");
$list->append(value => "bbb$_");
$list->append(value => "ccc$_");
}
$tree->getSubTree(3)->setActive;

print header, start_html(-style => $tree->buildCSS($tree->deepBlueCSS),
-script => $tree->baseJS);
print join "n", $tree->getHTML(styles => {bar => nav,
level0 => navlink,
level0Over => navover},
expand => 1
);
print end_html;

HTML::Widget::SideBar creates the HTML, and possibly some Javascript and CSS for a hirarchical side menu bar. It is very flexible, and allows you to create both simple navigational menus and complex dynamic sidebars with Javascript actions associated with items on the menu.

This module started as a hack on my Javascript::Menu, which makes them very similar, so if you got one of them, youll use the other with no sweat, I think.
The module supports the notion of an active item (usually the item denoting the page the user is viewing) and gives such item special treatment by marking it with a special CSS class and making it visible initially. It also has special support for selection menus where opening a branch closes all others.

What should you expect to see?

This depends greatly on your style definitions and action assignment (if you use that feature). Basically youll have a vertical bar (which will take up as much of the screen as your CSS will allow). Inside that bar youll have a tree of nested lists, and you can define the style for each level. When an item is clicked - its action is performed. A special predefined action allows you to show/hide child lists.
By default only the active branch (the branch containing the active item) and the top level list will be visible. You can override this (see getHTML).

Some naming rules

The sidebar will get an HTML id attribute. The default is sidebar but this is changeable through getHTML, as other naming rules.
Every list will be of class list unless another class is given through getHTML.
Every item in every list will be of the same class as all other items on the same level. The default is item for all items, but you can set each level separately through getHTML.

The active items class name is its levels class name, appended with Active.
Optionally, you may also set a mouseover style. For those of you who design for Mozilla, you really dont need that, just use the CSS pseudo-class :hover. For others, this will set the onMouseOver and onMouseOut attributes of an item to switch to and from that class.

Setting up the supporting code.

The sidebar created by this menu is formatted by CSS only. This means youll have to supply it. I included a class method called buildCSS which takes a datastructure (described below) and turns it into CSS, and an example of a sidebar design in such datastructure (I used this design in production).

You may also want to use the toggling support (described below), and in this case youll need some Javascript. This is given directly through baseJS. You can use it straight or dump to a file and tweak it to suit you best.