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.

conan
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: <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> 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 The code from two slides ago reduces to this snippet of Navlang: { color: #82c753; background: #6d6d6d; text-decoration: none; padding: 0.35em 0.5em;hover: { background: white; text-decoration: underline; };layout: horizontal; }*One | /one.htm*Two | /two.htm*Fun | /fun/

  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. • The interpreter walks through the AST to generate properly-cascaded CSS definitions and HTML, including overrides, along with JavaScript to show/hide submenus

  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: Inheritance may be too aggressive, especially for overrides. • What we would change: Give developers control over certain parts of the CSS formatting that are currently hardcoded or inaccessible

More Related