rMenu Update

Ruthsarian Menus have been updated with what I think is the most significant update yet. Horizontally centered menus. This was one of the last hurdles to jump and it proved to be deceptively simple.

I think I can finally say this menu system has finally added something back to the community. Up until now it was just a copy of Suckerfish with a lot of hacks to bring super-compatibility. But centered menus? Nobody seems to have done that, at least not with Suckerfish, or not without a lot of specific hacks and pixel sizing of elements.

There’s a new section in the bottom right column of the rMenu page that covers the details but the basics are:

Dropdowns only work if the parent LI element is a block element (a generalization, but the root of the problem). You can’t text-align block elements. You can’t float:center. So what’s the trick? In the past you’d have to set specific widths on the LI elements and, knowing this, set a fixed with on the parent UL element. Then you can set the left and right margins to auto. A big pain in the ass, especially if you want to add new menu elements.

rMenu doesn’t require any of that crap.

What happens is that 50% left padding is applied to the parent UL element. This gets a left-floating menu to start at the middle of the screen. All you have to do now is get the menu to move back 50% of it’s own width. That’s the trick. Margins and positioning percent values are based on the dimensions of the parent element. A UL with 50% left padding will not have padding equivalent to 50% of the UL’s width, but of it’s parent (the body of the page).

This means to move the menu back to the left to achieve the centering, you need to position the child elements of the UL, in this case the immediate LI children.

Ah! One problem. The UL is a block element. It’ll default to the width of its parent element regardless of how wide the menu actually is. So you need to somehow get the UL element to collapse to only the width of its children (the menu). This can be achieved by simply floating the UL element.

With the UL floating, the LIs can be positioned 50% to the left, which will be 50% the width of the UL, effectively centering the menu on the page.

Now it’s not perfect. IE/Mac won’t center the elements, it just keeps them left-aligned. They still work, they just don’t center. I’ll need to spend time on figuring out why and perhaps fixing the problem (if it’s fixable). But at this point I think it’s worth releasing in its current state.

I’ve also made a ZIP of the rMenu system available to help ease users in implementing it.

Good luck!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s