Navlang A JavaScript utility for navigation bars Paul Borokhov Brian Alker Motivation: Implementing good-looking CSS website navigation bars involves writing a lot of plumbing code unrelated to the actual navigation bar design. Navlang allows developers to easily create sophisticated navigation bars without writing extraneous code.

Domain The raw CSS and HTML required to generate the simple navbar to the right looks like this: One Two Fun ul { margin: 0px auto; padding: 0px; list-style: none; min-width: 15em; text-align: center; } li { display: inline; margin: 0px; padding: 0px; } li a { padding: 0.25em 0.5em; margin: 0px; text- decoration: none; } li a { color: #82c753; } li a:hover { background: white; text-decoration: underline; } The goal of Navlang is to reduce this sort of code down to only those elements essential to the design of the navbar.

The Language There are two basic language constructs in Navlang: Formatting definitions of the form “{k1:v1; k2:v2;...}”. These set the format of subsequent navbar items using CSS properties. Navbar items are of the form “*Text | URL”. Text sets the navbar’s displayed text, and URL sets the item’s link. The pipe and URL can be omitted for a non-linking menu item. The number of leading asterisks can be incremented on subsequent items to put those items in a sub-menu.

Demo { color: #82c753; background: #6d6d6d; text-decoration: none; padding: 0.35em 0.5em; hover: { background: white; text-decoration: underline; }; layout: horizontal; } *One | /one.htm *Two | /two.htm *Fun | /fun/ The code from two slides ago reduces to this snippet of Navlang:

Implementation The input file containing the navbar specification is read using a JavaScript parser created by the JS/CC parser generator and our grammar. The resulting AST is given to the interpreter. The interpreter walks through the AST to generate properly-cascaded CSS definitions and HTML, including overrides, along with JavaScript to show/hide submenus

Proud of: Navlang has the potential to actually be very useful to web developers. At the very least, its developers plan to use it to build some websites in the future. Mistakes: Inheritance may be too aggressive, especially for overrides. What we would change: Give developers control over certain parts of the CSS formatting that are currently hardcoded or inaccessible