Home â Articles â Sons of Suckerfish â Son of Suckerfish Dropdowns By Patrick Griffiths and Dan Webb. The original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class. Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels. HTML Dog, The Book HTML Dog is hosted by Titan Internet Single-level Dropdowns Right. Let's not beat around the bush. The initial HTML we're dealing with will look something like this:

A good wholesome structured unordered list. To set things up we need some basic styling: #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; } #nav li { float: left; width: 10em; }Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. Also remember that because we're floating things, the content underneath the dropdowns also needs to be cleared (clear: left). We obviously need to hide the lists that we want to 'drop down' but to make things as accessible as possible we need to avoid using display: none, which, as is commonly mentioned in image replacement write-ups, hides elements from some screen readers. You might think that there are a multitude of ways to deal with this, but having exhaustedly experimented with widths, heights, margins, top and clip across a large number of browsers, the best solution (accommodating multiple level lists anyway) lies in manipulating the left property. The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. But unfortunately Opera decides to offset absolutely positioned boxes in relation to the page and that's why the original Suckerfish Dropdowns didn't work on Opera - because they relied on the top and left properties with explicit lengths. So instead of display: none we use left: -999em to propel the dropdown list out of view and then left: auto (rather than left: 0) to bring it back: #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; }And that will sort out everything for those browsers that fully support the :hover pseudo class, but for Internet Explorer we need to set the Suckerfish JavaScript loose: sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i

Percoidei

Anabantoidei

">TRY
Weather Forecasts | Weather Maps | Weather Radar the below modified script, which lets you optionally specify the pop up window's size when using target="newwin" to get it to open in a new window: Code:

Blognewsandmoreint

Saturday, November 11, 2006

bbbbb

Blognewsandmoreint

Saturday, November 11, 2006

About Me

Links

Previous Posts

Archives