Developer's manual

Generator controls

Here's a full rundown of the controls in the generator program:

Formatting

Specify how you want the output CSS to be formatted. If set to "Compact / smaller filesize" then the formatting is limited to a single line-break after each complete rule. With "Readable / larger filesize" you get full line-breaks and indendation. Obviously the latter is much easier to read, but the former is much smaller code.

Amount of code

Specify whether to generate the CSS for an entire navbar and menu structure ("All CSS") or just the navbar ("Navbar CSS only"). We'll learn more about this feature later on ...

Navbar class name

Specify the class name you want to use in the output CSS. You can only set a value here if you're outputting Navbar CSS only - for menu CSS the class name has to be "udm".

If you are setting a value, only letters [a-zA-Z] numbers [0-9] and underscore [_] are allowed, and the name must begin with a letter.

Output

Specify whether to generate the CSS as a single group of rules ("All styles together") or split into two sets of rules, with colors and fonts separate from positioning and layout ("Colors and fonts separately").

Make it so

The two master control buttons to "Generate CSS" or "Reset the form".

Independent list-based navigation bars

There's a number of resources available on the internet for creating stylish navigation bars out of single unordered-lists - I'm thinking of things like Listamatic and List-o-matic.

These are fantastic tools, but their limitation is their template-based approach - the CSS you're given is for a set design, and any further changes you make are vulnerable to the vagueries of cross-browser support - as with anything else, you have to test it thoroughly.

But what if you had a tool that gave you complete control over the appearance and layout of a navigation list, and took account of browser variations itself - so that all you had to do was design it, and the exact CSS would be written for you?

Well, you do have that tool, using the CSS Generator's ability to output Navbar CSS only - I suppose you could call it "List-u-Like"

You've probably cut to the conclusion already, but for reference, here's what you do:

1. Setup a template page in the normal way, with an HTML list and the javascript menu scripts. Actually you only need the three scripts in the head section - the body scripts are not required.
2. Use the configuration file to design your navbar; refer to the Customising guide for details of each variable.
3. Generate the CSS using the "Navbar CSS only" option, and give it a unique class name.
4. Now simply paste the output CSS into your main stylesheet or <style> block, and copy the list HTML into your page, adding your class name to the <ul> tag.

And there you go

You might like to make copies of the configuration file and save each one separately - so you can come back to them later and make changes.

Multiple menu-generating navbars using "popup menus"

The script doesn't currently support multiple instances of itself - you can't normally have more than one menu-generating navbar. But in fact there is a way, albeit via a scenic route, by using the techniques outlined in the previous section in combination with the script's Popup menus configuration.

We've seen how to create independent list-based navigation bars, using a unique class name to associate each list with custom-generated CSS. There's no limit to how many you can make, and since each class name is unique, there's no limit to how many you can have on the same page.

So there's your multiple navbars - you can add popup menus to them If you're not familiar with popup menus, please see: Using popup menus.