Posted by Jarsto in Technology
July 25th, 2008 | 6 Comments »

I’ve been pondering the site redesign in recent days, and particularly the problems having a menu over two layers would cause. If I want to move the menu to the top of the site, which is what I’m currently thinking about doing, it simply can’t accommodate all the entries it has now.

One option would be to do drop-down submenues.1 But it’s difficult to do those well and most of the times I’ve tried to do them I’ve ended up pulling them out again because they didn’t quite work. That consideration more or less left me stuck with a menu down the side of the page the way it is now.

Then I realised the answer’s been staring me in the face almost daily. To be precise every time I check the Arch Linux forums.2 My homepage and blog, and the headers from the present menu could form the top layer of such a menu, with the other entries grouped on the lower layer, and displayed based on context.

The one dilemma that leaves me is whether I should go for a simple static implementation like Arch’s, or a more complicated one which changes the second layer on mouse over as well. I’ve done that before as well, but in that case I’ve never felt quite happy about the result, so I’m hesitant to try it again. On the other hand it would allow a greater amount of One Click navigation.

I haven’t even got a preliminary design for this yet, since this type of structure change would definitely mean redoing the entire site’s design. But the realisation that I have been looking at the perfect way to do this almost daily is certainly worth an entry here (as well as hitting myself gently in the head later on).
_______
1 The Dragon Page offers a good example of these
2 Located here

6 Responses to “A Two Layer Menu That Works”

  1. Starstuff Says:

    Hi Jarsto,

    my opinion: I’d prefer the option where the “sub”menu is displayed when you move the mouse over the main menu items. This makes it easier for me to navigate a site.
    Even on a site I am familiar with I like this option because I don’t always remember where pages are located. Having to click my way through main menu items until I finally see the submenu item I am looking for does not improve my user experience. (And I don’t remember the page’s location any better, I just get annoyed) ;)

  2. Jarsto Says:

    I’m with you in principal, because I like to keep in as much single click navigation as possible. On the other hand I know from experience that implementing that feature is a bitch of a job. Specifically getting it to work in IE6.

    Of course I could always leave IE6 in the cold and put something on the site explaining it’s not a recommended browser…

  3. Starstuff Says:

    *rofl* I just looked at your site today in IE6 and the background image for example didn’t get rendered as it should. But my own site doesn’t look nice in IE6 either … I should probably put a disclaimer up as well ;)

    But don’t you like challenges? Just see it as a (HUGE) challenge to make it work in a browser that ignores most W3C rules. “If you can make it work in IE6, you can make it work anywhere.” *grin*

  4. Jarsto Says:

    IE6 will only do “background-attachment: fixed” for the body element (at least if I recall correctly it will actually do it there, it might not do it at all). And it doesn’t do the “position: fixed” for the locked black bars top and bottom at all.

    There’s a handy trick to work around at least some of that: only IE6(and earlier IEs probably) will process CSS with an underscore on the front of it (like “_position: relative”) so you can put that underneath your code for the other browsers to force a different (not as bad looking) behaviour in IE6.

  5. Starstuff Says:

    Funnily enough, I should probably be thankful for the existence of IE. After all, all my paid projects made the most money because I had to fix everything IE was rendering wrong. If I would have written the pages just for FF, Opera or Safari I would only have gotten half the money ;) Still, it’s annoying. But thanks for the tip, I will try that next time.

  6. Jarsto Says:

    There’s another work around as well. Microsoft has built in an option to send code specifically to a certain version of IE so you can use to send something specifically to IE6. That allows you, among other things, to have a specific stylesheet only for IE6.

    You can also target other versions of IE with this. Just google “IE Conditional Comments” for more info. I’ve had to do an IE6 style sheet and an IE7 stylesheet (along with the general stylesheet) for a single site in the past. Don’t get me wrong IE7 is better than IE6, but it’s still crap compared to the rest of the field.

Leave a Reply