www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Dropdowns Like This Forum

  1. #1
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063

    resolved [RESOLVED] Dropdowns Like This Forum

    How do you create dropdown menus similar to the "Thread Tools" dropdown menu on this forum, that's at the top of all the threads?

  2. #2
    Join Date
    Jul 2009
    Posts
    91
    I actuall hate the drop downs in this forum. Not as bad as some but annoying anyway. Just for information!

    You can create a drop down menu which the user only has to hover over using just CSS (faster and more compatible) but if you really want Javascript have a look at JQuery which has many functions to do what you want.

  3. #3
    Join Date
    Mar 2007
    Posts
    946
    Using z-index and position. Take a look at http://www.w3schools.com/Css/pr_pos_z-index.asp
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  4. #4
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    I apologize, but I don't understand why z-index would be used to create a dropdown menu. Could you give me a code example?

  5. #5
    Join Date
    Mar 2007
    Posts
    946
    Quote Originally Posted by Joseph Witchard View Post
    I apologize, but I don't understand why z-index would be used to create a dropdown menu. Could you give me a code example?
    Definition and Usage

    The z-index property specifies the stack order of an element.

    An element with greater stack order is always in front of an element with a lower stack order.

    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
    http://www.w3schools.com/Css/pr_pos_z-index.asp
    Take a look at

    HTML Code:
    <html>
    <head>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    </style>
    </head>
    
    <body>
    <div style="width: 600px; height: 600px; margin: auto;">
    <div style="width: 600px; height: 600px; border: 1px solid red; background-color: green;">
    This box will be behind the blue box
    </div>
    <div style="height: 100px; width: 100px; z-index: 1; top: 0; margin: 20px; position: absolute; border: 1px solid black; background-color: blue;">
    Box that hovers
    </div>
    </div>
    </body>
    </html>
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  6. #6
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    I read what z-index did, but that's not really a dropdown menu, is it? Isn't that just rearranging what's on top?

  7. #7
    Join Date
    Jul 2009
    Posts
    91

  8. #8
    Join Date
    Mar 2007
    Posts
    946
    Quote Originally Posted by Joseph Witchard View Post
    I read what z-index did, but that's not really a dropdown menu, is it? Isn't that just rearranging what's on top?
    well you need the z-index to have the drop down menu above any other content that is below your drop down.
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  9. #9
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles