Pure CSS menus have long ceased to be a novelty, yet there's still some innovation to be done there. I now have my own small set of CSS menus, which are based on a very minimal markup and obtain their styling from CSS.
The use of as little as possible markup, was born from necessity. I was doing a redesign for which I had to leave the markup untouched, yet I wanted to transform the horizontal navigation list into a vertical CSS dropdown menu.
However, to be useful as a collapsing menu, there needed to be some kind of caption, such as "Navigation menu" which would expand the menu when hovered upon. So I introduced that with Generated Content, with li:first-child:before.
Nothing spectacular one would say. Nay, indeed, but the interesting thing is that I added a Unicode linebreak, like this: content:"Navigation Menu \000D\000A :: ";. To be more precise it is a CRLF in Unicode.
Why the linebreak, and not simply display:block; on the generated content? Well, I wanted to have :: in front of all the list items, same as for the first listitem. So by introducing the linebreak, I was able to add the :: to the first item as well.
During the creation of the TC, Literary Moose and I worked together to clean up the markup and the code, and he also added another method to achieve the same effect, which should be more cross-browser compatible, as it does away with the linebreak in the GC by using ul::before. Smart.
© 2003-2006, Mark Schenk.