Yesterday I talked about the basics, today I’ll talk about navigation.TSN.ca’s 2002 re-design saw us embrace drop-down menus. The content on the site is incredibly deep, and navigation can quickly get out of control. At the time, we figured drop-downs were the way to go, and they are effective…but two years later, they have their problems.
First off, they’re not really accessible. Because they’re javascript based, navigation basically vanishes for anyone who has javascript disabled.
I set out to find an alternative to the drop downs, inspired by the likes of ESPN.com’s cool fly-out nav. A quick trip to A List Apart showed me “Suckerfish Dropdowns“. That led me to “ADx Menus” and to Gazingus.org’s Expandable Menus.
After playing for the better part of a day, I realized that ESPN’s style of flyouts is brilliant and incredibly small.
Here are my experiments;
Suckerfish Nav – I never got this one to really work, not sure why.
Expandable Nav based on Expandable Menus – really nice to look at, but quite slow in I.E. for some reason.
ESPN style – needs work, but it’s the most elegant solution so far.
Up next: Onward to the “Chewy middle”.