For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.
My criteria were:
- I wanted to use unordered lists to list all the links, not bury them deep within a javascript file. This would also make it easy to mantain and be database driven in the future
- I’d prefer to not have javascript event handlers in the markup, but this wasn’t essential
- It had to show all links ‘flat’ if the user had javascript disabled
- Good cross browser/platform compatibility, no ‘IE Win only’ disclaimers.
- I’m using it within a centered layer, and want to avoid the need for absolute positioning if possible
- I wanted to control the look completely with CSS
- And the moon on a stick please
Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.
Hooray for Netscape DevEdge, where I finally found their Hybrid-CSS JS menus which fulfilled all my needs. Also, through this article I came across another alternative at Brainjar’s. This uses event handlers, but is more flexible with its css and javascript.
Archives by tag:
2006,
2007,
accessibility,
acoustic,
actionscript,
adobe,
adverts,
advice,
alternative,
ambient,
analog,
applecare,
appletv,
apps,
art,
articles,
atmedia,
attap,
audio,
australia,
awards,
ban,
basecamp,
bbc,
belkin,
bitmap,
blackhole,
blogs,
bluetooth,
bonecho,
books,
boxee,
boxmodel,
braindump,
british,
browser,
browsers,
browsers.mozilla,
bug,
bugs,
cairo,
cakes,
calendar,
camera,
camino,
cbbc,
cc,
cheerup,
cheese,
childreninneed,
christmas,
cms,
cocoalicious,
coda,
code,
collections,
colourblind,
colourblindness,
comedy,
comments,
comps,
conferences,
country,
covers,
craft,
cs5,
css,
css.webstandards,
danielsmonsters,
delicious,
dell,
design,
design.colourblindness,
desktops,
digital,
discussion,
dock,
doctorwho,
drawing,
dream,
dreams,
drwho,
education,
electronica,
email,
england,
events,
evernote,
expressionengine,
eyetv,
family,
feedback,
femalevocal,
figures,
firefox,
fireworks,
flash,
flexible,
flickr,
flock,
fonts,
foundries,
foundsounds,
fowd,
free,
frontrow,
ftp,
g5,
games,
gaming,
gardening,
garlic,
geek,
geekends,
geekery,
gifs,
gigs,
google,
googlereader,
grammys,
graphics,
greader,
grids,
gtd,
hacks,
handbags,
hardware,
harrypotter,
helvetica,
helvetireader,
heros,
hicksdesign,
holiday,
hosting,
howto,
humanrights,
icab,
ical,
ichat,
icon and interface design,
icon design,
icons,
ideas,
illustration,
illustration/icon design,
illustrator,
illustrators,
im,
images,
indesign,
infographics,
inspiration,
installation,
intel,
interface,
interfaces,
internet,
internetexplorer,
interview,
interviews,
inventions,
ipad,
iphone,
iplayer,
ipod,
itunes,
javascript,
jobs,
journal,
justabitoffun,
leaflets,
lego,
leigh,
lifeio,
links,
list,
listening,
lists,
littlebigplanet,
logo,
logo and branding design,
logo design,
logos,
london,
londonbombing,
mac,
macmediacentre,
macmini,
macs,
macworld,
magazines,
making,
maps,
mediacenter,
mediacentre,
mediacentres,
mellow,
memes,
menus,
merchandise,
messages,
microformats,
microsoft,
modernart,
moleskine,
movabletype,
movies,
mozilla,
music,
myob,
natural,
nerdery,
news,
nintendo,
nostalgia,
nostradamus,
notes,
obituaries,
omniweb,
opacity,
opensource,
opera,
organisation,
os,
osx,
oxford,
oxfordgeeknight,
packaging,
panic,
panther,
paper,
parallels,
penguin,
people,
photo,
photos,
pimp,
plex,
plugins,
png,
podcast,
polygamy,
powerbook,
practice,
presentation,
presentations,
presents,
press,
print,
printmaking,
propoganda,
ps3,
published,
punditry,
questions,
quicksilver,
quotes,
radio,
radiohead,
raf,
railway,
rants,
resources,
responsive,
retorts,
retro,
review,
reviews,
riffs,
rip,
ripoffs,
rissington,
rss,
safari,
saft,
sage,
samantha,
science,
scifi,
scrapbook,
security,
server,
shelf,
shiira,
signage,
simplenote,
sites,
siteskin,
siteskins,
sixties,
skinning,
slides,
slowcore,
software,
solutions,
songbird,
sony,
sound,
spam,
speakers,
speaking,
sponge,
spotlight,
starflyer59,
starwars,
stationery,
store,
summerboard,
surveys,
svg,
sxsw,
syncing,
tagging,
talks,
tea,
teasing,
templates,
ten,
texpattern,
text,
texteditor,
texteditors,
textile,
textpattern,
thebeatles,
theme,
themes,
theming,
thenational,
theory,
tiger,
timeline,
tips,
toys,
tv,
typefaces,
typography,
ui,
updates,
updtes,
userstyles,
vector,
veer,
versions,
video,
wallpaper,
web,
webapp,
webapps,
webbies,
webfonts,
webkit,
website and logo design,
website design,
webstandards,
whitenoise,
why,
widgets,
wifi,
wii,
windows,
wireframing,
wishlists,
wordpress,
work,
working,
xhtml,
xul,
yojimbo,
youtube,
zengarden