Use unnumbered list for div.menu and div.footer links

The links in the header and footer (About, Edit, History, etc.) currently use straight <a href> links in the mark-up. This works fine. If these were marked-up as unnumbered lists instead, though, it would give greater flexibility for styling (such as a vertical list instead horizontal). Sites such as Listamatic have good examples of how to change the CSS to accommodate these kinds of styles.

Here is a patch to Hatta to allow it to do the markup. I also changed the default style sheet to match what browsers currently display (as near as I could get it—I compared before and after through BrowserShots and almost all browsers display it the same as the current behavior).

# HG changeset patch
# User Julian Cowley <julian@lava.net>
# Date 1235160996 36000
# Node ID c0d3866cf68d8b8c6caf9b4b72ced31a97f9ee29
# Parent  41dc404e7a1ec422043cbc5e285088e84cad2294
Use unnumbered list for div.menu and div.footer links.

diff --git a/hatta.py b/hatta.py
--- a/hatta.py
+++ b/hatta.py
@@ -154,6 +154,9 @@
 div.snippet { font-size: 80%; color: #888a85 }
 div.header div.menu { float: right; margin-top: 1.25em }
 div.header div.menu a.current { color: #000 }
+div.header div.menu ul, div.footer ul { margin: 0; }
+div.header div.menu li, div.footer li { display: inline;
+    list-style-type: none; padding-left: 5px; }
 hr { background: transparent; border:none; height: 0;
      border-bottom: 1px solid #babdb6; clear: both }"""
     icon = base64.b64decode(
@@ -1264,13 +1267,15 @@
             menu = self.index.page_links_and_labels(self.config.menu_page)
             if menu:
                 yield u'<div class="menu">'
+                yield u'<ul>'
                 for link, label in menu:
                     if link == title:
                         css = u' class="current"'
                     else:
                         css = u''
-                    yield u'<a href="%s"%s>%s</a> ' % (
+                    yield u'<li><a href="%s"%s>%s</a></li>' % (
                         request.get_page_url(link), css, werkzeug.escape(label))
+                yield u'</ul>'
                 yield u'</div>'
         yield u'<h1>%s</h1>' % werkzeug.escape(page_title or title)
         yield u'</div><div class="content">'
@@ -1282,13 +1287,15 @@
             backlinks = request.adapter.build(self.backlinks, {'title': title},
                                               method='GET')
             yield u'<div class="footer">'
+            yield u'<ul>'
             if not self.config.read_only:
-                yield u'<a href="%s" class="edit">%s</a> ' % (edit,
+                yield u'<li><a href="%s" class="edit">%s</a></li>' % (edit,
                     werkzeug.escape(_(u'Edit')))
-            yield u'<a href="%s" class="history">%s</a> ' % (history,
+            yield u'<li><a href="%s" class="history">%s</a></li>' % (history,
                 werkzeug.escape(_(u'History')))
-            yield u'<a href="%s" class="backlinks">%s</a> ' % (backlinks,
+            yield u'<li><a href="%s" class="backlinks">%s</a></li>' % (backlinks,
                 werkzeug.escape(_(u'Backlinks')))
+            yield u'</ul>'
             yield u'</div>'
         yield u'</div></body></html>'

You can do it much easier without having to patch Hatta, just add this to your style:

div.menu a {
 display: list-item;
}

and voila, you have a vertical list. You can use also display: block if you don't want the bullets. No need for additional layers of markup and wrappers, and it still looks good in browsers that don't support CSS. – Radomir Dopieralski

The standard argument is that if a menu is a list of links, it be marked up as such. But based on your arguments, I take it then that div.menu will always just contain a list of a href links and won't ever be used for anything else? If that's the case, then I can see leaving it the way it is. It does have a nice elegance to it. — julian

I have to admit that I used the class="menu" out of habit, but yes, it doesn't appear anywhere else. It should be something more like id="hatta-menu", as to minimize clashes with eventual page content. I think I will change it in version 1.3.0 – while there are not many themes using it yet. Changing it later would be impossible.

When designing the HTML structure of the page I have a simple philosophy:

Make it look acceptable without CSS, use proper tags whenever possible,
Add enough tags, classes and ids to make it easily stylable,
If I want anything displayed in non-standard way, do it with CSS.

I admit that the <ul> approach to menus is loved by CSS writers because it provides wrappers around the <a> elements, so you can have additional background images and such. This will be a non-issue with CSS3, but it will take a while until it is widely adopted. I could add additional separators and spans around the links and separator, I think. Then you could remove the separator with text-indent:-65535em and have a structure that's equivalent to the <ul> list. Or just do the lists, considering how popular they are.-- Radomir Dopieralski