webdev | Two 〈Foo〉s Walk into a 〈Bar〉 2007-09-13T23:03:03-05:00 Chris Povirk beigetangerine@gmail.com http://twofoos.org/ Copyright © 2003–2015 Chris Povirk. All Rights Reserved. http://twofoos.org/ SPLAT 2007-09-13T23:03:03-05:00 New: The program used to generate this web site. <div xmlns="http://www.w3.org/1999/xhtml">SPLAT</div> http://twofoos.org/content/splat/#update_2007-09-13T23:03:03-05:00
initial posting
Description

I use SPLAT to generate this web site. The name stands for Stylesheet Processing Lives on After THLOP. As the name suggests, SPLAT is the follow‐up to THLOP, the program I used to use to generate my web site when it was located at pitt.edu. THLOP stands for Three Hundred Lines of Perl, which accurately describes the original code with about ten percent error. Additionally, the acronym accurately suggests the elegance and dynamism of the code, which was perfectly well behaved but not very flexible.

This page exists mainly so that I have something to put in the <generator> element of my Atom feeds; I don't have promotional materials to explain why it's so great, and really, for most people, it probably isn't. It turns XML files that I write in Vim into web pages, using XSLT (xsltproc, specifically) and a little shell scripting to do the work. A major feature, in my view, is that it doesn't generate pages dynamically like most blogging packages do. Instead, when I make a change, I run one script, and it generates the whole site and uploads it to the server, from which it is served as static HTML. Another feature is that, when I edit a page, I can choose whether or not it should show up as updated. This feature may well be widespread, for all I know, but if so, it's wildly underutilized.

Download

As noted above, SPLAT has an unusual feature set, so it's probably not of general interest. Further, it has virtually no documentation, and code specific to my web site is peppered throughout. This download is available mainly to justify the existence of this page, which, as you'll recall from earlier, exists so that I have something to stick in the <generator> element of my Atom feeds. So yeah, don't click here:

Available under version 2 of the GNU General Public License.

 2005-06-30T00:00:00-05:00 New: There is no shortage of HTML/CSS/JavaScript/Java/Flash menus available for your web page. There are fewer that use only HTML and CSS, fewer still that look decent in browsers without CSS support, and even fewer that don't look funny when a menu item's text is too long. Well, you can still make this one look a little odd if you try, but in my biased opinion, it's the best I've seen. Check out the feature list. (Fully functional in Firefox and Opera; appears as nested lists in IE and Lynx.) <div xmlns="http://www.w3.org/1999/xhtml">Auto‐Sizing Pure CSS Menus</div> http://twofoos.org/content/cssmenus/#update_2005-06-30T00:00:00-05:00
initial posting
Download

If you want to use the CSS menu stylesheet, you will probably want to right‐click and save this link. It includes nearly everything from this page in text format in the comments, as well as the actual CSS. Menu Stylesheet

Features
  • Arbitrarily nested submenus
  • Menu separators
  • No JavaScript (will function even if the user has turned scripting off)
  • Plain HTML list syntax (no new, complex format to learn)
  • Accessible (since it is just a list)
  • Degrades gracefully in the absence of sufficient CSS support (plain nested lists in Lynx, IE)
  • Fully functional in Firefox 1.0, Opera 8.0
  • Menus widen to handle long menu item labels
  • Automatically adds arrows for submenus
  • Documentation to aid in usage and customization
Example Menu Output
Example Menu Source 
<ul class="menu">

      <li class="submenu">
      File
      <ul>
        <li><a href="http://www.google.com/">Open</a></li>
        <li><a href="http://www.google.com/">Save</a></li>
        <li class="submenu">
        More
        <ul>
          <li><a href="http://www.google.com/">Import</a></li>
          <li><a href="http://www.google.com/">Export</a></li>
        </ul>
        </li>
        <li class="separator">&#xa0;</li>
        <li><a href="http://www.google.com/">Exit</a></li>
      </ul>
      </li>

      <li class="submenu">
      Edit
      <ul>
        <li><a href="http://www.google.com/">Cut</a></li>
        <li><a href="http://www.google.com/">Copy</a></li>
        <li><a href="http://www.google.com/">Paste</a></li>
      </ul>
      </li>

      <li class="submenu">
      Search
      <ul>
        <li><a href="http://www.google.com/">Find</a></li>
        <li><a href="http://www.google.com/">Replace</a></li>
      </ul>
      </li>

      <li class="submenu">
      Help
      <ul>
        <li><a href="http://www.google.com/">About</a></li>
        <li><a href="http://www.google.com/">Index</a></li>
      </ul>
      </li>

    </ul>
Usage

First, of course, you must put some code in your HTML file to tell browsers to use this stylesheet. If this stylesheet is located in the same directory as the HTML file that you want to use it, it is sufficient to put this line in the <head> section of your HTML file:
<link rel="stylesheet" type="text/css" href="menu-stylesheet.css" />

Build your menu like the one shown above.

Main Points
  • Menus (including the menu bar, which I'm considering to be a menu) are ul's.
  • The top‐level ul should have class 'menu'.
  • Submenu ul's should use neither 'menu' nor 'submenu' as classes.
  • Menu items are li's.
  • li's with child menus should have class 'submenu' and should have no other children except some text before the ul child. This text will be the menu label, and it should NOT be a link, nor should it contain any links.
  • li's without children should have a link containing a text label as their only child.
  • Menu separators can be created with the following code:
    <li class="separator">&#xa0;</li>
Customization

You can, of course, safely fiddle with fonts and colors without breaking anything. The same goes for borders. The other changes you may be interested in are those relating to menu size. Because CSS does not support constants, these changes are not as easy to make as I would like. To simplify the process, I have labeled the places where I would have used constants. At the time of this writing, the "constants" are:

  • menu_line_spacing: line height of menu items (not to be confused with font size, which you can set by adding an appropriate rule in the 'ul.menu, ul.menu ul' section)
  • menu_padding_left: padding on the left side of the menu items
  • menu_padding_right: padding on the right side of the menu items
  • min_menu_width: minimum width of menu items, NOT including padding. Note that menus WILL widen to accomodate larger menu item labels; HOWEVER, submenus from any of their menu items will not appear to their far right (as they would if each menu item fit into min_menu_width) but instead somewhere toward the middle of the menu item

Thus, the code contains lines like these:
margin-left: 5.1em; /* min_menu_width + menu_padding_right */
The above line indicates that if you want min_menu_width to be 5em and menu_padding_right to be .6em, you should change 5.1em to 5.6em, since 5em + .6em = 5.6em.

Legal

Auto‐sizing pure CSS/list menus.

Copyright (C) 2005 Chris Povirk

I place this page and the CSS menu stylesheet in the public domain. You may use, modify, and distribute them for whatever purposes you wish, with or without this notice. No further permission is required.

Disclaimer (adapted from the GNU GPL FAQ):

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.