navlang n.
Skip this Video
Loading SlideShow in 5 Seconds..
Navlang PowerPoint Presentation
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 6

Navlang - PowerPoint PPT Presentation

  • Uploaded on

Navlang. A JavaScript utility for navigation bars. Motivation: Implementing good-looking CSS website navigation bars involves writing a lot of plumbing code unrelated to the actual navigation bar design.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Navlang' - delano

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


A JavaScript utility for navigation bars

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.

Paul Borokhov

Brian Alker


The raw CSS and HTML required to generate the simple navbar to the right looks like this:

<div id="social"> <ul id="socialinks"><li>

<a href="/one.htm">One</a></li>

<li><a href="/two.htm">Two</a></li>

<li><a href="/fun/">Fun</a></li> </ul> </div>

#social { background: #6d6d6d; color: white;

padding: 1em 0px; margin: 0px auto; clear:

both; bottom: 0px; position: absolute; width:

100%; }

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

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:
  • What we would change: Add additional formatting control for certain parts of the output that are currently hardcoded or inaccessible.