I’m at the beginning of creating what is going to be a fairly huge “mega menu” of one sort or another. The problem is that it’s confined to a fairly small space. Additionally, because of the design, it needs to be fairly minimal in appearance (I’ve deliberately gone for text links instead of buttons of one sort or another). I’ve also been inclined to shy away from JS-powered nav menus. I’m experimenting with a flyout menu from Stu Nicholls that uses presentational JS, but degrades nicely, and even works well in IE6 (by using tables as a fallback to the CSS-driven function). Unfortunately, I can already see that even this relatively minimal menu is going to break the design.
Here’s a page using the menu. (Scroll down to the “Principles Menu” just under the wacky op-art graphic.) There are only a few items included so far, and you can already see that the L3 items don’t display properly outside of the container in a 1024-wide display.
I’m wondering if I don’t want to go an entirely different direction and use some sort of big honking lightbox of some sort to contain the nav menu, with a single link to the menu on the page. Has anyone seen any outstanding examples of such a navigational menu? Are there any caveats or constraints to using such a thing, besides the obvious reliance on JS for the menu?
Thanks!
Somewhat undigested thoughts here (still chewing the cud) but I’m not convinced by having a menu (especially a complex one) in the middle of the page like that. Might get a bit confusing and be hard to find on the page.
I would either look at having the menu across the top of the page or in the sidebar. If at the top, perhaps a mega menu scenario, or, if down the side, an expanding/collapsing ‘concertina’ menu (made with jQuery) that would be permanently expanded for those without JS.
(Now to swallow for some more digestion…)
I think therein lies the problem, I suggest revamping your design to take navigation into account 
Yeah, I know, I’ve thought of that, too. But I really like the design. Unfortunately, it was never intended to support this kind of navigation; I didn’t foresee it when I began developing the site.
Anyone else have any thoughts?
I have to agree with bluedreamer. As beautiful as I find your design - reminds me of ALA - the design must support the content not the other way round. So, I’d keep the general aesthetic but design your layout in a way to support your content rather than bending the content to fit the design. And it’s much better to do this now, while there’s not too much content. It’ll be a great pain later on. 
Is there a reason why the content areas need to stay the way they currently are?
What speaks against having a menu above the content?
Actually, I think I can get away with a three-item, horizontally aligned “mega menu.” As long as I can figure out a way from keeping it from overflowing out of the central content area, and ensure that it degrades nicely, it should work. :whip:
Maleika, thanks for the kind words. It’s not my original design, but I’ve modified it quite heavily to meet the needs of this content, and I’ll take the credit for recognizing a hell of a good design when I see it! 
I know I’m not being of any help, sorry! But I have been thinking and in my mind the way the W3C’s new design is laid out might well fit with your content. Not that you should copy it, but the navigational structure of the left column might be worth taking a look? http://www.w3.org/
I like the hierarchical structure. If your resource is going to be what it looks like, then such a hierarchy might be a good one for your site.
Ok, I’m shutting up now.
Don’t shut up, how will I ever learn anything?
I like the W3’s menu structure. The “view all” option is a good one, and an approach I could possibly adapt – almost like providing a dedicated “site map” for these specific links. I don’t like the idea of making the user drill down to a separate page for nav purposes, but if the mega-menu doesn’t fly, then that is a possible fallback plan. Thanks, K!
Awrighty, I’ve implemented this megamenu, as per Ralph’s suggestion.
I like it a lot, except for one thing: it degrades not at all with JS disabled. Any thoughts? I’m thinking of making the button link (that triggers the megamenu) an actual link that goes to a separate nav page for the no-JS crowd. Not the best alternative, but since I know as much about writing JS as I know about flying a 747, it’s what I got. Anyone have a better solution?
Sorry, I wasn’t clear where the menu is. It’s the orange button titled “Principles Links.” D’oh!