Simple, accessible, Mac-friendly drop down menu

Discussion in 'HTML Development' started by Impel GD, Oct 12, 2006.

  1. Impel GD Graphic and Web Design

    I need to create this menu:

    [IMG]

    I have the basic style of the top links done in CSS, but the links in blue should only appear when 'projects' is moused-over, and should disappear when either 'projects' is moused-out or the blue links themselves are moused-out.

    I've been looking at different menu systems and show/hide behaviours, but was wondering if anyone could give me advice on the best way of doing it. If the client browser doesn't support whatever behaviour that shows/hides the links it should just display them permanently for instance. It also needs to work on Mac browsers.

    Thanks.
  2. JohnC < ? />

    Hi David,
    you might be interested in this all-css drop down method I posted a year ago:
    http://www.hu-forums.com/showthread.php?t=3886
    It uses the :hover pseudo-class which IE doesn't support, but there's a js-based plugin which makes it conform and allows your code to stay simple and compliant. Not too hard when you get the hang of it, and it works on Safari. (Doesn't work for IE5/mac though.) You don't have to know any Javascript at all.
    A little demo here:
    http://www.rafflesnagoya.com/test/hover.html
  3. Impel GD Graphic and Web Design

    Thanks John - should've found your post before posting myself really.

    However, I've just come accross TJKDropDown Menu:

    Will work my way through and let you know what happens.
  4. JohnC < ? />

    Yeh that looks interesting too, though a bit more complicated...

Share This Page