dcsimg
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

  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>

  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.

  9. #9
    Join Date
    Dec 2007
    Location
    Mississippi
    Posts
    1,063
    All right, thank you.

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