Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

MOSe Menus

October 27, 2003

When in doubt, reload.

I introduced my idea of MOSe, or Mozilla/Opera/Safari Enhancement about four months ago, with my Zen Garden submission mnemonic. It’s time to take it further.

With a strong nod to Eric Meyer’s Pure CSS Menus, the latest tweak to mezzoblue adds an opaque CSS-based menu system to the global navigation system. That is, not a line of Javascript was used to construct these. Gecko browsers and Safari love them, Opera 7 has a few issues I may leave as an exercise to Opera Software to resolve, and all browsers that can’t handle them (you know I’m looking at you, Internet Explorer) have a fallback.

By logically structuring the bits and pieces that used to be strewn about the top navigation area and the sidebar, I’ve reduced the number of possibilities to ‘About’ (which covers information on the site, me, and a FAQ) and ‘Weblog’ (which features the RSS feeds, archives, etc.) Each of the two main navigation items link to a respective secondary page that lists menu items in a little more detail.

Responsible navigation allows all users equal access to content; doing it the way I have offers a way out for IE (and other CSS-capable browsers that miss the menus). A little bit of redundancy goes a long way toward accessibility in this case.

Markup

An extra div was necessary for each menu, thanks to my centered, absolutely-positioned layout. Given that FIR is used for the main menu items to start with, the code is a bit more targetted with extra classes and divs. These are necessary for the specific background images I use.


<ul id="siteInfo">
 <li class="li1">
  <a href="/"><span>About this Site and
its Author</span></a>
  <div id="sec1">
   <ul>
    <li class="li1"><a href="/">about dave
</a></li>
    <li class="li2"><a href="/">about
mezzoblue</a></li>
    <li class="li3"><a href="/">faq
</a></li>
   </ul>
  </div>
 </li>
</ul>
CSS

Once you get around some of the hoops I had to jump through to position the menus properly on this site, the CSS is remarkably simple. The menu is hidden by default:

#sec1 {display: none;}

And then to show it upon hover, all that’s needed is this:

li.li1:hover > #sec1 {
 display: block;
}

Mozilla and Safari allow us to apply :hover to arbitrary elements, in this case meaning specifically the li that contains both the parent link and the child menu.

Why couldn’t I have just applied it to the a element within, and allow that to control the menu? Wouldn’t that have worked in IE? No, because XHTML doesn’t allow a elements to be nested — the menu’s ul would have to site inside the original a element. Besides, IE doesn’t support PNG.

The Visuals

And because I’ve written off IE by this point, the door was wide open for using PNG images to enhance the menus, which is exactly what I did. The background gets a 50% opacity blue PNG, and a nicely faded image sits just below each menu to give me a faint drop shadow effect.

I’m a little unsure how to finish them off — the mouseover image effects on the ‘About’ menu may be dropped, or I may apply them to the ‘Weblog’ menu eventually. I’ll have to start using them to figure out which way I’ll go.

Bugs

No new technique is without its share of bugs, naturally. I am aware that Opera 7 doesn’t seem to get the absolute positioning right, and that resizing fonts seem to break the menus. It would seem the links aren’t quite being treated as block-level items, so overlap occurs. I have no clue why this is right now.

Let me know in the comments if you come across anything else. For now, I’m content to put these out there and see what happens.

And finally, a screenshot for you poor folk stuck on IE:

(Yes, I’ll probably end up boosting the opacity a little more to keep the menu items readable.)


Reader Comments

1
October 27, 02h

Win2k/IE6. Right bar is in fact on the right, but starts below the content. see http://www.solarfrog.com/images/mezzoblue.jpg

2
Dave S. says:
October 27, 02h

Ah, thanks Lance. That was due to my <pre> on the home page, rather than the new setup. Back to normal.

3
captain says:
October 27, 03h

looks like an absolute mess in FB 0.7. has no one else noticed? it just displays the menu open and badly so, on top of other elements of the page. a worthy attempt, tho. hope you get it working.

4
Jon Hicks says:
October 27, 03h

Dave, it looks sweet, but in Camino the menus go behind the Zen Garden and Blue Spark images. Firebird and Mozilla (mac) are both fine though - so must be a temporary problem with Camino.

In safari, the whole page layout is jiggered, with a huge horizontal scroll bar. If you’re using the text indent FIR method and absolute positioning, Safari likes to have overflow:hidden as well. Thats what was causing the huge horizontal scroll bar on mine. Dunno if that helps.

Looks great - good to see the possibilities being opened up!

5
Dave S. says:
October 27, 03h

captain: When in doubt, reload.

6
Jon Hicks says:
October 27, 03h

Captain - it looks fine in Firebird 0.7.1 on Mac OS X

7
kjell olsen says:
October 27, 03h

The new layout is severely broken in Safari 1.0 (the jaguar version.) I don’t know about Safari 1.1, but it is unusable right now. The content is positioned about 80% from the left, the header is all garbled, and the navigation headers (weblog, about) are duplicated all over the page. You tested it on Jaguar yet?

8
Dave S. says:
October 27, 03h

Thanks for the roundup Jon, I’ll have to look a little more closely at Safari. It was working great last night, but I made a few adjustments this morning which may have thrown things off.

9
kjell olsen says:
October 27, 03h

On the page mt throws at you (it looks like you haven’t implemented the new menu yet) the layout is fine, not broken at all. Check the homepage, and then this page, maybe you can find the problem.

10
captain says:
October 27, 03h

thanks dave/jon, it does in fact load right after a refresh, my pardons.

this is all very exciting!

11
Dris says:
October 27, 04h

Indeed, Safari is breaking up rather ungracefully. I nearly cried.

Not really. But hey, it’s cool. You’ll have the problem alleviated soon, I’m sure. For now, I’ll check out what you’ve got in Firebird.

12
Dris says:
October 27, 05h

Ah, it’s fixed!

Looks great, Dave! Didn’t notice the drop shadow until you mentioned it, but the subtlety is perfect.

13
Lach says:
October 27, 05h

In Moz 1.3, I’m getting the faq and mezzoblue text overlapping in the about menu.

14
Dave S. says:
October 27, 06h

Wouldn’t you know it, the Safari problem was due to an extra ul. When in doubt, *validate*. I keep learning this the hard way!

Lach - that’s thanks to the font size issue I mentioned in the post. I’m still working on that one.

15
John says:
October 27, 07h

What a shame this does not work in Opera 7.21 Win2k, which has no problems with Eric Meyer’s linked menu work.

The menu at http://www.moronicbajebus.com works fine with Opera however it also falls over in the playground http://www.moronicbajebus.com/playground/cssplay/pop-up-menus/

Good luck with the fine tuning.

John

16
Dave says:
October 27, 08h

It seems to be still breaking in Safari 1.1. The menus fall behind Blue Spark. That said, I am anxious to see it working, the section of the menu below Blue spark look sweet.

17
Tom Passin says:
October 27, 08h

Beautful appearance on FB 0.7 on Windows.

I think the reason you are having problems with overlapping text when font size is increased is very simple - the menu widths are specified in px (for shame :-)), and when the font size gets too big, the line of text has to wrap.

Try specifying the width in em or % and see what happens.

18
hemebond says:
October 27, 09h

Resize your window down and the menus pop-up nowhere near the actual item.

19
Sonia says:
October 27, 11h

Dave,

Nice Work! Love the png background.

(forgive me if you’ve mentioned this, I haven’t seen it!)

In moz 1.0.2 at narrow widths the dropdown ‘drops down’ to the left of the actual item. I imagine this has to do with absolute positioning of the dropdown and the fixed nature of ‘about | weblog | contact’.

20
Mark M. says:
October 28, 03h

Just to confirm, Safari 1.1 (v100) has the menu(s) appearing behind the ‘zen garden’ and ‘blue spark’ images, but strangely enough, on top of the ‘modernalus’ image.

Look forward to seeing the last few problems ironed out - looks a treat on FB on Windows as others have noted.

21
October 28, 03h

Ken, for plain English (and Spanish) translations of CSS selectors such as the one you mentioned, try selectoracle:

http://gallery.theopalgroup.com/selectoracle/

“li.li1:hover > #sec1” returns:
Selects any element with an id attribute that equals sec1 that is a child of a li element with a class attribute that contains the word li1 and which is in a hover state.

22
Anne says:
October 28, 03h

Doesn’t work in Mozilla1.6a. Also after refreshing. The menu’s appear behind the images under them.

23
Big Al says:
October 28, 04h

Very cool. I’ve been thinking about using EM’s css menus on my site, but I’ve been far too lazy to get around to doing it. BTW, it works fine in FB 0.7 on WinXP home

24
Eric says:
October 28, 04h

Bravo Lloyd! I’m so embarrased I didn’t remember the attribute part.


I tried to post a comment at your site but it was broken :(

25
October 28, 04h

Looks lovely in Firebird0.7/Linux! I like the mouse-over images too, I’d like them on the weblog menu as well. Nice technique, I’ll keep it bookmarked.

26
ManxStef says:
October 28, 06h

Confirmed the problems in Moz -
I’m on Mozilla 1.5 Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; rv:1.5) Gecko/20031007 which produces the following:
http://stef.ballagroove.com/images/temp/20031028_mezzoblue_dropdown.gif

The text wraps, resulting in the “mezzoblue” part of “about mezzoblue” lying over the “faq” text.

Altering the browser’s text zoom to 75% fixes it:
http://stef.ballagroove.com/images/temp/20031028_mezzoblue_dropdown_fontsat75percent.gif

27
Ryan Short says:
October 28, 06h

Great job, and quick too. It works well now in moz 1.6a.
Well done.

28
Ryan Short says:
October 28, 06h

It has stopped working in the later versions of Firebird, in 0.7 (mozilla 1.5) it works fine but in the latest nightly (mozilla 1.6a) the menus for “about” and “weblog” appear behind the “zen garden” and “blue spark” buttons.
By the way it looked great in the older Firebird.

29
October 28, 07h

Fixed my comments :) Thanks, Eric.

Running Firebird .7 on linux, it looks like there’s a problem with the “about mezzoblue” text wrapping down onto the next menu item: http://www.daltonlp.com/ss1.png

30
October 28, 07h

I agree with Mark M, Anne, and Ryan Short that the menus are appearing underneath the “zen garden” and “blue spark” (but not modernalus) pictures below them. I’m using the latest MFB on Win2K:

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6a) Gecko/20031027 Firebird/0.7+

I even cleared my cache trying to get it to work, so reloading didn’t work for me.

31
October 28, 08h

Dave—looks great in FB.7/Win98. I totally dig the opacity, it’s a very cool effect.

Would anyone mind if I asked a stupid qustion? What does the > do in this line of Dave’s code:

li.li1:hover > #sec1

I’ve tried unsuccessfully to find out what this does on a number of occasions, but can’t quite seem to tease it out of Google…

32
Dave S. says:
October 28, 08h

I just z-indexed ‘em. Refresh & reload - any difference?

(I’ll have to grab Moz 1.6a to test this later)

33
Dave S. says:
October 28, 08h

Ken - http://www.w3.org/TR/CSS2/selector.html#child-selectors should do ya.

34
October 28, 09h

This is general comment not feeback about bugs from someone relatively new to this stuff, so hope that’s ok.

I think the techniques you write about and implement are great in pushing the limits of how we think about designing with CSS and web pages in general. I find this site and the Zen Garden inspirational and rich places for learning.

That being said I have to say that I liked your original navigation better. I thought it was structuraly explicit and easy to navigate. This guuui.com article on visual versus strcutural simplicity, http://www.guuui.com/issues/04_03.asp and this study on breadth versus depth, http://www.humanfactors.com/downloads/apr032.htm, explain where I am coming from.

But to sum up I think that there ought to be a good reason to use hidden navigation. Yes such considerations are relative to your audience (web designers/developers) and your site’s purpose (CSS experimentation). But I have a fear that handy techniques such as this, that have their place when used appropriately, can easily become the next fad devoid of any relationship to audience, purpose or the user experience. But hey, that’s just my opinion…

35
haze says:
October 28, 10h

IE - CSS driven dropdowns = pity

36
Dave S. says:
October 28, 10h

Andrew, excellent points of course - you shouldn’t be using the latest whiz-bang technology for the sake of the technology alone. You have to keep in mind everything else you normally would, including usability.

I’ve been meaning to revamp my navigation for a while, however. This is only phase 1. There are more changes that will eventually lead to (I hope) a logical breakdown by section. I think Doug ( http://www.stopdesign.com/ ) and Ethan ( http://www.sidesh0w.com/ ) are both doing it in a way that would work for me as well. But we’ll see where it goes.

37
Wesley Moy says:
October 28, 10h

In Mozilla Firebird, it appears as if the text wraps onto the next menu item when the text size is increased too much (as stated by others previously).

While not solving the larger issue at hand, perhaps add a non-breaking space between words such as in the phrase, “about dave”. This will not fix the problem of text extending beyond the bounds of the pop-up menu. This will, however, fix the problem of overlapping text.

Overall, nicely done; after my own website frustrations, you’ve made a CSS-believer out of me.

38
Keith says:
October 28, 11h

I’ve never been a big fan of dropdown menus myself, not really sure why, but these are pretty cool. Great example of the power of CSS…Nice work.

39
Anne says:
October 28, 11h

Works like a charm!

I didn’t checked the code but I think you used all three opacities out there (-khtml-,-moz- and W3C)?

40
Jimmy Cerra says:
October 28, 11h

IE 5 can display the menus too, if you use a little bit of DHTML Behaviors too implement arbitrary hovering. Its trivial code, so I’ll let you figure it out. Here a hint to make life even easier: define a .hover class.

41
Eric says:
October 28, 11h

IE does actually support PNG, but to use them requires an ugly mess of JavaScript or a simple server-side tag, and I know how unpopular anything server-side is :)

Nice work though, I dig the menus.

42
October 28, 12h

This is a nice cooincidence.

I just finished a demonstration of .png transparency support in IE, using a couple extra lines of css.

http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

43
Moose says:
October 29, 01h

Monsieur,

The mnemonic aspect of the MOSe campaign would be strengthened if slightly altered to: MOoSe.

I couldn’t stop myself from posting this :)

M.

44
Sally says:
October 29, 02h

I’m viewing on IE5.5/Win (I’m sorry! It’s at work!) with text size Medium and your right hand column wraps beneath the main content. On the two smaller sizes it lines up correctly though.

45
Eric says:
October 29, 02h

S-less Dave, you have a convert. No more opacity for me! Not using it will make me more unique ;)

46
jrickards says:
October 29, 05h

Hi:

Got a couple of screenshots from Oper 7.21/WinXPro.

In the first screenshot ( http://jrickards.ca/menu1.jpg ), notice that the mouse pointer is over “about” but no pop-up menu. Also noticed the position of the “contact” link to the right. In the second screenshot ( http://jrickards.ca/menu2.jpg ), notice that the mouse is between “about” and “weblog” and the menu appears way over to the left. Also notice that the position of “contact” has shifted. Actually, all three seem to shift around a lot, sometimes all together, sometimes as they should appear.

Good effort, am looking forward to a cross-browser solution.

Jules

47
bongoman says:
October 29, 09h

I’m not seeing the full effect in Safari 1.0 - only seeing the first submenu and nothing more.

48
Dave says:
October 29, 11h

Very cool. I was banging my head against the wall trying to build a similar system a few months ago but couldn’t get the degradation to work so I gave up on it.

One pet peave, though. “Opaque” means completely solid, allowing no light to pass through. Surely you mean “translucent” or “transparent”.

(Sorry, in my other life I’m an editor.)

49
Dave S. says:
October 29, 12h

It’s pretty common to refer to opacity as the amount of transparency in the graphics field, thanks to Photoshop’s sliders that muddle that definition. But looking back, I guess I did use the two a little too interchangably, didn’t I? Whoops.

50
Lea says:
October 29, 12h

Dave – that’s sidesh0w.com (for Ethan’s site)! re: comment 41

sideshow.com, hahaha… Completely different sites. :P

51
October 31, 08h

Nice work Dave, maybe you can clarify something for me. What’s the difference between #myDiv p { margin: 0; } and #myDiv > p { margin: 0; }? In practice they do the same thing, no?

52
Dave S. says:
November 01, 11h

Shaun, in this case it’s specifically to hide bits and pieces from IE. Functionally there isn’t a ton of difference in my example.

In general though, the difference between a child and descendant selector is definitely esoteric at best: http://www.w3.org/TR/CSS2/conform.html#doctree

For the most part they can be used interchangably - although descedant is broader, and child is a bit more specific.

53
November 03, 05h

Thanks for clearing that up for me, Dave. I guess I could have dug that up myself, huh? :D Cheers.

54
Daniel says:
November 12, 03h

I’m not sure if this is the case in XP or 2000 when using IE, I have long since stopped using it outside of testing my own site, but this screenshot was captured with the Longhorn Build 4051 & IE 6.05. I hope Microsoft can fix some of their CSS issues before the next XP Service pack that should include an updated IE.

http://www.dan-reedy.com/hostedpics/mezzoblue.jpg