Open main menu

lensowiki β

Navlang

Revision as of 07:59, 13 March 2012 by Lensovet (talk | contribs) (fix first example so that marker HTML entity is escaped properly)

Navlang is an easy-to-use navigation bar specification language. Its goal is to allow the web designer to create a usable, decent-looking navigation bar with minimal typing or markup creation. For those who want to really fine-tune their navigation, it also allows simple specification of CSS attributes to control the appearance of individual menu items.

Since examples are always more fun than reading boring text, here's a few. Note that these are not live but images at the moment.

Contents

Demo

Code Preview
{ color: #82c753; background: #6d6d6d; text-decoration: none; padding: 0.35em 0.5em;
	hover: { background: white; text-decoration: underline; };
layout: vertical; layout-width: 10em; }
*One | /one.htm
{ color: #84b6d5; marker: ☞ }
**Two | /two.htm
*Fun | /fun/
{ background: white; }
**Funtwooverride | /override
***Third level | /goodtimes.htm
{ background: gray; }
****Fourth | /four
*Oneback | /oneback
{ marker: dot; }
**Choo choo | /choo
***Overrides | /woo
****Gray | /gray
{ layout: horizontal; }
*About us
{ direction: below; }
**Directors | /directors
**Developers | /developers
**Users | /users
*Support
**FAQs | /faq
**Knowledge Base | /kb
 
A horizontal menu with the first menu item highlighted (moused over)
{ layout: vertical; layout-width: 200px; element-style: rounded-tab; border: yellow thin solid; hover: { border: red thin solid; }; }
*Roadmap | /roadmap.html
*Projects | /projects
*Coding | /developer
{ direction: right; marker: dot; }
**Module Owners | /about/owners.html
**More modules | /owners
 
A vertical menu with the third menu item highlighted (moused over)

Succinct description of all language features

To those who want a written explanation of what's going above, here goes:

Formatting declarations, surrounded by curly braces, can precede any increase of menu level but cannot be placed in the middle of the menu (to override, for example, a single menu item). The formatting declaration inside the curly braces can contain any CSS properties you desire, which will be passed and set to the nav bar items' <a> and <span> tags. A number of special keywords allow additional features. Namely:

  • layout determines the direction of the navigation bar. choices are horizontal/vertical; horizontal default.
  • hover allows you to specify CSS attributes which apply to nav bar elements only when they are hovered over (i.e. the a:hover and span:hover CSS selectors). uses exact same syntax as the "normal" formatting declaration.
  • direction determines the direction of submenus (i.e. items with level > 1) relative to their parent item. valid choices are right, left, above, below, and same. The last is the default and does not create pop-out menus (as in the first example above).
  • marker specifies a marker which precedes all nav bar items. either none, dot, or any HTML entity such as &#9758;; none default.
  • layout-width specifies the width of the nav bar for vertical nav bars. default is 100% as per standard CSS.
  • element-style specifies the style of the nav bar item. current either rounded-tab or regular; latter is default.

In general, formatting specs are inherited in much the same way as in CSS when a class name is appended to the element's class field. In particular, this means that children of any given element will inherit all of its properties unless they are manually overridden. Furthermore, the first time a level (i.e. *, **, ***, etc.) appears, its formatting declaration (including a lack of one) is made as that level's "prototype" formatting specification. All further items in the same nav bar with the same level will have the same formatting, as will their children, unless they are overridden themselves.

However, it is possible to override this prototype inheritance on a per-branch basis by specifying a different formatting spec before beginning the branch (i.e. as if declaring a prototype for the first time). Note that this override will complement the existing prototype, so any values not explicitly overridden will be inherited as usual. Such an override lasts for the duration of the branch in which it was introduced and is discarded once the branch is complete.

Availability

Navlang will be shortly available on github.

Known issues

  • Pop-out menus more than one level deep (i.e. *** and above) do not work properly
  • IE6 on Windows 2000 reports some bogus errors, preventing the nav bar from rendering
  • Potential issues on non-spec-conforming browsers
  • No non-JavaScript solution at the moment

Authors

This project is the work of Paul Borokhov and Brian Alker. The parser is generated by the JS/CC web environment, so we are much indebted to Jan Max Meyer for it.