1 / 6

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.

delano
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. Demo

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

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

More Related