Seb – we’ve already covered that.

Lovely!

Another way (which I’ve never personally done but think it’d be a decent solution) is to hold any JS-required styles in its own stylesheet and then use JavaScript to attach that stylesheet to the page.

I use a Javascript load event to add a new class to the BODY or DIV#container tag. The javascript function simply adds ‘.js’ to the chosen tag’s class list allowing me to write CSS for JS and non JS browsers.

For example, after the event fires…

<div id=“container”>Hello</div>

Becomes…

<div id=“container” class=“js”>Hello</div>

Now, you can write CSS styles for JavaScript enabled and JavaScript disabled states.

#container { color: #f00 }

#container.js { color:#00f }

Whats also nice about this is – the additonal ‘js’ class selector will always have higher specificity than the non-class selector so there is no issue with CSS interferance.

I completely agree that hiding things with JS is much better than hiding with CSS in this case, but as you say it’s hardly rocket science. A more complete article might have been if you came up with a cunning method to stop the “flicker” you get between the submenu showing and the javascript hiding it… I’ve not tried to solve this problem before and am embarrassed to say that the best I can come up with is putting a element straight after the menu which would presumably hide it quicker than an onload event? Not pretty though… any ideas?

It’s a minimal issue in this case, but with a bigger menu system – or one with a contrasting background colour – the flicker issue becomes much more significant.

Personally the solution I’ve used before is an “expand all” link at the bottom of the menu that reloads the page with a non-dynamic menu. A bit of functionality that some users might appreciate anyway, and solves the accessibility problem on a page that would have had a hugely unpleasant flicker when the menus got hidden (large menu at clients demand).

great! a really lightweight way to do something on a site I am working on right now.

I know this article is ancient history.. but any chance you could show how it would work if i had multiple items that opened and closed in the menu.

I want to close all open menus as each one new one is opened?

I tried what I thought would work but not knowing jQuery or javascript very well it was not happening!

Great and excellent article t’s realy helpful. Thanks again.