Ruthsarian Menus

Working Examples

Same exact markup is used in each example below with only the class attributes being changed to determine how the menu is rendered.

By default dropdowns appear to the right of their parent list item. But right-aligned menus or left-aligned menus that appear on the right-side of the webpage may result in dropdowns being rendered partially (if not completely) off-screen. So right-side menus are configured to drop to the left.

• Layouts
  • Comic
  • Tank!
  • Gargoyles
  • Skidoo Too
  • Skidoo
    • Fixed Width
    • Fluid Fixed Width
    • Detached Masthead
    • Border Into Masthead
    • Background Images
    • Gutterless
  • Experiments
    • Plaine
    • Nausicaä
    • Bob
• Labs
• Blog
  • Web of Information
  • Cold Fusion
  • Informational
• Contact

Horizontal menus are probably the more common structure for the top-level. Left, centered, and right aligned can be done.

• Layouts
  • Comic
  • Tank!
  • Gargoyles
  • Skidoo Too
  • Skidoo
    • Fixed Width
    • Fluid Fixed Width
    • Detached Masthead
    • Border Into Masthead
    • Background Images
    • Gutterless
  • Experiments
    • Plaine
    • Nausicaä
    • Bob
• Labs
• Blog
  • Web of Information
  • Cold Fusion
  • Informational
• Contact

The reversed list is a by-product of how the list items are floated. You could work around this by reversing your list, but I much rather keep it.

How To

So how do you use this thing? Well first you need to include two important files into your webpage. One is the stylesheet, rMenu.css. The other is the JavaScript library that contains the functions needed to support older browsers, ruthsarian_utilities.js. There are also some images used to signify the direction a menu item that has a child menu will drop. With these files in place we're ready to go. Where you locate these files on your website doesn't matter as long as you reference them in your HTML correctly. Images should probably go in the same folder as the CSS otherwise you'll need to edit the stylesheet to reflect the correct location, relative to the stylesheet, of the images.

Markup

You need to get your list markup in order first. Nothing surprising here. Use unordered lists (UL) to craft your menu. Sub-menus should be new ULs that are placed inside the LI element that contains the menu item the sub-menu should drop from. You don't have to supply anchors for every menu item but it's strongly suggested you do. These anchors (A) should wrap the text (and images if need be) of the menu item but should not wrap the sub-menu. An example is given below:

<ul class="rMenu-hor rMenu" id="rMenu"
  ><li class="rMenu-expand"
    ><a href="">Menu Item</a
    > <ul class="rMenu-ver"
      ><li
        ><a href="">Menu Item</a
      ></li
      ><li
        ><a href="">Menu Item</a
      ></li
    > </ul
  ></li
  ><li
    ><a href="">Menu Item</a
  ></li
> </ul>

The markup looks a bit funny. The reason for the funny markup is to keep it (relatively) readable without allowing whitespace between UL and LI elements. If you have a way of organizing your markup that's different but works for you, go ahead and use it. The key point here is the lack of whitespace between elements in the markup. But this example has whitespace! What's that all about? It's for IE/Mac. IE/Mac needs to have whitespace exist before and only before <UL> and </UL> tags. Why? I don't know, it's IE/Mac. It's wierd that and many other ways. This bit of whitespace doesn't cause any problems with other browsers, so we're okay. Whitespace in other locations will cause problems, most notably in IE/Win.

Classes

You should also notice the use of the class attribute on a couple elements in the example above. The classes you apply determine the way the menu functions. There are many classes defined in the stylesheet so be sure to look through it; specifically under the section of the stylesheet marked Extended Menu Mechanics. Classes are applied only to the UL elements with the exception of the rMenu-expand class which is only applied to LI elements to signify that LI element has a dropdown menu in it. Some basic classes are:

• rMenu-hor: render the menu as horizontal
• rMenu-ver: render the menu as vertical
• rMenu-hRight: the menu is horizontal, right-aligned (so dropdown menus should go left of its parent menu item)
• rMenu-vRight: the menu is vertical, right-aligned (so dropdown menus should go left of its parent menu item)
• rMenu-wide: do not impose a specific width on the menu. let it fill out the width it's containing element
• rMenu-noFloat: do not float the menu
• rMenu-lFloat: float the menu left
• clearfix: child elements are floated, make the parent element contain them

Note that several of these classes contradict others. You don't want to mix, for example, rMenu-hor with rMenu-vRight. On the contrary, some classes go together such as rMenu-hor and rMenu-hRight. You may notice the lack of specific left-aligned classes. By default menus are left-aligned so rMenu-hor does not need a corresponding rMenu-hLeft class. Clearfix is sure to create some confusion. Generally you only use this on horizontal menus. Check out the previous link for information on what Clearfix is all about.

While the majority of classes are applied to the top-level menu, sub-menus have classes as well. This is needed in situations where you want a difference between how the top and sub-menus are rendered. In the example given above you'll notice rMenu-hor is applied to the top menu. The sub-menu then takes the rMenu-ver class. This makes it so the sub-menus display as vertical menus and not another horizontal menu. I can't think of many situations where you'd want to have horizontal sub-menus. Really the only place for horizontal menus is the top-level menu. Everything else should be vertical menus.

JavaScript & IE

Internet Explorer (pre-version 7) does not support the :hover pseudoclass nor child selectors. This means only the top-level menu is displayed. With a little JavaScript we can get the menus working in versions back through 5.0. The origins for this fix come from Son of Suckerfish. All the necessary JavaScript is included in the ruthsarian_utilities.js script included with this package. However you will have to get your hands a little dirty in order to activate this.

In the example above you'll notice that the top-level UL has an id attribute as well. This id is passed to a function when the page loads. This function attaches event handlers to the LI elements so that when you mouse over an LI element it is assigned a new class, sfhover. We use CSS that targets this class to make the sub-menus display in old versions of IE.

So you need to have this special function called with the id of your menu when the page loads. Here's what it'll look like:

<script type="text/javascript" src="ruthsarian_utilities.js"></script>
<script type="text/javascript">
  <!--
    event_attach( 'onload' , function () {
      sfHover( 'rMenu' );
    } );
  //-->
</script>


The first line loads the external script. The rest is some embedded JavaScript code that attaches a function that contains one instruction, sfHover( 'rMenu' );, to the onload event. This means that the sfHover function will be called when the web page finishes loading. Now it is possible to have multiple menus in your web page. Each menu would have a unique id and you would add a sfHover function call for each menu.

Check The Stylesheet

The stylesheet contains extensive comments. Read them. You'll gain a better understanding of what's going on and, hopefully, a better idea of how the various classes and markup come together to create the dropdown menu effect. You really should feel comfortable with your understanding of how this all works before you start to really use this menu system.

I've also included a lot of notes about various bugs I encountered while developing this system. If you find something amiss with your implementation try looking through these notes in the stylesheet. You may be doing something that's triggering one of these bugs.

Also look at the markup used on the demo page. This will give you a real-world example of how the menu works, how the classes work together, and what your markup should look like.

Centered Menu

One problem with rMenu is that each menu item is a floating block element, even the horizontal menus. This means we cannot simply text-align:center; to create a center-aligned menu. Nor can we convert the horizontal block elements to inline because the menus then drop relative to the UL element and not the LI element; the menus would all drop over each other in the same spot.

So is it even possible? See for yourself:

How? Is it magic? Yes, in a way. The short story is this: we push the menu right 50% of the width of the space the menu appears in (width of the column). We then pull the menu back to the left by 50% of the width of the menu itself. This centers the menu. The problem is in getting the menu to use the right value as its base when calculating that 50%. The first 50% is based on the width of the space or column inside which the menu is to be centered. The second 50% is based on the width of the menu itself. So how do we do that?

The UL element which contains the menu is a non-floating block element by default for a horizontal menu. Its width is the same as the space the menu will be centered within (the width of the column). We need to collapse this element so that it takes on the width of the menu. How do you do that? Float it. Once the UL is floating we're ready to start working.

First, we move the menu to the right 50%. This is done with CSS positioning. We set position:relative; on the UL and then set left:50%. This pushes the UL 50% to the right. This 50% is not based on the width of the UL but on it's parent, which will have the width of the space the menu is to be centered within.

The second step is to then move all the top level LI elements in the menu left 50%. This is done similarly: position:relative; left:-50%;. This negative 50% is based on the width of the parent element to the LI elements, in this case the now collapsed UL element.

With that the menu is centered.

One thing to note: now that the UL element is floating we need to wrap it in a DIV and apply the clearfix class to that DIV otherwise the menu will act as a float and content will start to line up immediately to the right of the menu. The additional markup is simple and looks like this:

<div class="clearfix rMenu-center">
    <ul class="clearfix rMenu-hor rMenu"
        .
        .
        .
    > </ul>
</div>

Right now this method does not work on IE/Mac platforms. The menu will simply appear left-aligned. This is not a very big problem, but is something that will continue to be worked on to see if it's possible.