Drop Down Llama Menu II

Spurred by Charles question, I went about transforming Drop Down Llama Menus from a proof of concept to a working—even IE6—drop down menus. Even though IE6 did not change since the original version, I was able to get around the biggest issues with Dean Edwards IE7 script. I should not rag on IE6 alone because I as I went through the code I noticed relic workarounds for Opera and Mozilla; these have also been removed. In the process to the barebones working version, I created a second proof of concept based on the original proof of concept with the goal of working in IE6.

The HTML and their Tags Conceptual Roles

I will start with the HTML code because it is easy—as it should be.

<ul id="navigation">
   <li><a href="/">Launch</a></li>
   <li><a href="/about/" >About</a>
      <ul><li><a href="/about/index.php#seamus">Seamus</a></li><li><a href="http://portfolio.moronicbajebus.com/">Portfolio</a></li><li class="last-child"><a href="/about/resume/">Resume</a></li></ul>
   </li>
</ul>

From the HTML code I am going to attach concepts (based upon their function) to the elements. To illustrate this I will use a tree with the tag name, a description, and the children tags.

• ul#navigation
  • li
    The top level item container or for short the top level item.
    • a
      The top level item link.
    • ul
      The submenu container or for short the submenu. This is optional.
      • li
        The submenu item.
        • a
          The submenu link.

If you want to see what those concepts relate to the finished product, here you go:

Or if you want to see where the tags will be in the finished product, here you go:

Difference from Normal CSS Drop Down Menus

Now I am not going to explain the entire process. There are many other fine tutorials to explain CSS drop down menus. As for the specifics to Drop Down Llama Menu, the nested ul (the submenu) is not hidden outright; but the lis (submenu items) of the nested ul (submenu) is hidden.

Normally:
ul#navigation > li > ul{ display: none; }

Drop Down Llama:
ul#navigation > li > ul > li{ display: none; }

This leads into another difference. The submenu is not triggered to show (open) by hovering over the top level item. But instead the submenu items—not submenu —are triggered to show by hovering over the submenu container.

Normally:
ul#navigation > li:hover > ul{ display: block; }

Drop Down Llama:
ul#navigation > li > ul:hover > li{ display: block; }

As for the drop-down icon, that is just the background image of the submenu container (ul#navigation > li> ul). The rest is either just positioning of elements or decorative trim.

Files

1. Original proof of concept
2. Second proof of concept which works in IE6
3. Barebones example with cleaned up code and documentation

• When: Sunday 2006 September 24th.
• Filed: Frontpage, CSSPlay.
• Respond: Leave a response.
• Ping: Trackback from your site.