SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2003
    Location
    Brisbane, Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gradual display of drop down menu

    I have a drop down navigation menu system using layers and javascript and was wondering how you can have a layer come up gradually instead of appearing instantaneously. Eg - when someone mouses over a navigation button, the drop down menu (which is just a HTML table on a layer) slides down from the bottom of the button rather than just appear.
    Tips 'n' Tutorials
    Free webmaster tools, code and resources on web design, HTML, Javascript and Internet marketing

  2. #2
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You make the menu, then place that in a div. This div will act as a viewport. In CSS, set it's contents to overflow, it's width to the menus width, and the height to 0. Also set it's contents to stick to the bottom rather than to the top.

    Then set up an interval, say, firing at 25 ms, and add a fraction of the menus height to the viewports height at each timeout fire. You can just use a division function for calculation what to add to the height of the viewport, but best results are mostly achieved by assigning a sinus/cosinus function and using a part of it's trajectory for the distribution of movement over time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •