Navlang
This presentation is the property of its rightful owner.
Sponsored Links
1 / 6

Navlang PowerPoint PPT Presentation


  • 119 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Navlang

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


Navlang

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.

Navlang allows developers to easily create sophisticated navigation bars without writing extraneous code.

Paul Borokhov

Brian Alker


Domain

Domain

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.


Navlang

Demo


Implementation

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.


Navlang

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


  • Login