how do you make a sliding drop down menu?

Discussion in 'Web Design and Development' started by Jas123, Jul 24, 2010.

  1. Jas123 macrumors member

    Apr 1, 2008
    Such as on some event, a menu drops down with the same effects as pulling down a window shade.

    I am also wondering how do you make an image/object follow your mouse cursor?
  2. Dana Beck macrumors member

    Dana Beck

    Jun 13, 2010
    Blackwell, OK
    Drop Down Menu Tutorial

    Go here for a free tutorial on dropdown menus using css and javascript. They have everything.
  3. bootedbear macrumors 6502


    Sep 13, 2004
    Austin, TX
    A JavaScript library such as jQuery would make this almost trivial. Check out the slideDown() method (and of course there's a corresponding slideUp() method).

    As for making an item follow the cursor, establish a mousemove event handler on the body and grab the mousemove coordinates. Move the position of the element accordingly (also pretty easy with something like jQuery).
  4. THX1139 macrumors 68000


    Mar 4, 2006
    I wouldn't advise doing that unless you're making some type of game or interaction for a purpose. Having stuff follow your cursor on a website is annoying and completely out of style. It was all the rage back in the Geocities days and when everyone was first doing Flash based websites. Nowadays... cheesy.
  5. designguy79 macrumors 6502

    Sep 24, 2009
  6. designguy79 macrumors 6502

    Sep 24, 2009
    Also, make sure that your menu is backwards compatible with browsers who don't support JavaScript (or for people who leave it turned off by default!). A lot of screen readers, mobile phones and search engine bots don't have a "hover" state.

    If you can't make the main menu non-JS compatible, at least make the links available somewhere else on the page (footer, for example).

    This is the one I love:

    I modified it slightly to work with the jQuery plug-in "hover intent" (link below) so that if their mouse "slips" off for a half a second, they don't have start over.


Share This Page