Navlang - Revision history

Lensovet: /* Availability */

2012-03-31T08:38:24Z

‎Availability

Lensovet: fix first example so that marker HTML entity is escaped properly

2012-03-13T07:59:20Z

fix first example so that marker HTML entity is escaped properly

Lensovet: /* Availability */ update info, break out known issues section

2010-04-15T02:05:04Z

‎Availability: update info, break out known issues section

Wadmin: /* Availability */

2010-03-20T07:21:45Z

‎Availability

Lensovet: add availability, authors

2009-12-21T03:01:19Z

add availability, authors

Lensovet: Created page with ''''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…'

2009-12-21T02:58:07Z

Created page with ''''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…'

New page

'''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.

===Demo===
{|
! Code || Preview
|-
| <pre><nowiki>{ 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</nowiki></pre> || [[Image:Navlang-overrides.png|thumb]]
|-
| <pre><nowiki>{ layout: horizontal; }
*About us
{ direction: below; }
**Directors | /directors
**Developers | /developers
**Users | /users
*Support
**FAQs | /faq
**Knowledge Base | /kb</nowiki></pre> || [[Image:Navlang-horizontal.png|thumb|A horizontal menu with the first menu item highlighted (moused over)]]
|-
| <pre><nowiki>{ 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</nowiki></pre> || [[Image:Navlang-vertical.png|thumb|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' <nowiki><a> and <span></nowiki> tags. A number of special keywords allow additional features. Namely:
*<tt>layout</tt> determines the direction of the navigation bar. choices are <tt>horizontal</tt>/<tt>vertical</tt>; <tt>horizontal</tt> default.
*<tt>hover</tt> allows you to specify CSS attributes which apply to nav bar elements only when they are hovered over (i.e. the <tt>a:hover</tt> and <tt>span:hover</tt> CSS selectors). uses exact same syntax as the "normal" formatting declaration.
*<tt>direction</tt> determines the direction of submenus (i.e. items with level > 1) relative to their parent item. valid choices are <tt>right</tt>, <tt>left</tt>, <tt>above</tt>, <tt>below</tt>, and <tt>same</tt>. The last is the default and does not create pop-out menus (as in the first example above).
*<tt>marker</tt> specifies a marker which precedes all nav bar items. either <tt>none</tt>, <tt>dot</tt>, or any HTML entity such as <tt>&#9758;</tt>; <tt>none</tt> default.
*<tt>layout-width</tt> specifies the width of the nav bar for vertical nav bars. default is 100% as per standard CSS.
*<tt>element-style</tt> specifies the style of the nav bar item. current either <tt>rounded-tab</tt> or <tt>regular</tt>; 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.

@@ Line 60: / Line 60: @@
 ==Availability==
-Navlang will be shortly available [http://github.com/lensovet/navlang on github].
+Navlang is now available [http://github.com/lensovet/navlang on github].
 ==Known issues==

@@ Line 60: / Line 60: @@
 ==Availability==
-Navlang is still currently in development. Features remaining to be implemented are pop-out menus more than one level deep (i.e. *** and above) and compatibility with non-spec-conforming browsers such as Internet Explorer. Look for a release in first half of 2010.
+Navlang will be shortly available [http://github.com/lensovet/navlang on github].
 ==Authors==
 This project is the work of Paul Borokhov and Brian Alker. The parser is generated by the [http://jscc.jmksf.com/ JS/CC] [http://jscc.jmksf.com/jscc/jscc.html web environment], so we are much indebted to Jan Max Meyer for it.

@@ Line 60: / Line 60: @@
 ==Availability==
-Navlang is still currently in development. Features remaining to be implemented are pop-out menus more than one level deep (i.e. *** and above) and compatibility with non-spec-conforming browsers such as Internet Explorer. Look for a release in January 2010.
+Navlang is still currently in development. Features remaining to be implemented are pop-out menus more than one level deep (i.e. *** and above) and compatibility with non-spec-conforming browsers such as Internet Explorer. Look for a release in first half of 2010.
 ==Authors==
 This project is the work of Paul Borokhov and Brian Alker. The parser is generated by the [http://jscc.jmksf.com/ JS/CC] [http://jscc.jmksf.com/jscc/jscc.html web environment], so we are much indebted to Jan Max Meyer for it.

@@ Line 11: / Line 11: @@
 layout: vertical; layout-width: 10em; }
 *One | /one.htm
-{ color: #84b6d5; marker: &#9758; }
+{ color: #84b6d5; marker: &amp;#9758; }
 **Two | /two.htm
 *Fun | /fun/

@@ Line 3: / Line 3: @@
 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.
-===Demo===
+==Demo==
 {|
 ! Code || Preview
@@ Line 58: / Line 58: @@
 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.