Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Reverse Dropdown Boxes?

    I am a beginner at this designing-with-JavaScript business and would like to create reverse dropdown boxes (that is, dropdown boxes that "drop" the other way around--perhaps "drop-up" boxes could be the closest term I could associate with such elements) for the menu of my personal site; I've seen such menus before, however at the same time I have also neglected to take note of what JavaScripts were used. Is there any particular script you could recommend to me in order for me to be able to achieve this effect, or a method you would suggest?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    First of all, relying completely on javascript for making a menu is not a good idea, since such menu can have some drawbacks like, they can't be accessible in the absence of javascript support in user's browsers. Also, search engines won't crawl the links made by javascript.

    So, I'd recommend a CSS based one, such as the one described at http://htmldog.com/articles/suckerfish/dropdowns/

    Now, it's very easy to change the direction of the sub menu. Say, if you wanna make the sample dropdown menu at http://htmldog.com/articles/suckerfi...le/bones2.html, to a "dropup" menu, just adjust the CSS like
    Code:
    #nav li {/*bones2.html (line 26)*/
    float:left;
    position:relative;
    width:10em;
    }
    #nav li ul {/*bones2.html (line 31)*/
    background:orange none repeat scroll 0;
    bottom:1em;
    left:-999em;
    position:absolute;
    width:10em;
    }
    (some fine tuning may also be required)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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