[RESOLVED] Dropdowns Like This Forum

**Joseph Witchard** · 03-26-2010 02:46 PM

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?

**DaiLaughing** · 03-26-2010 02:57 PM

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.

**skywalker2208** · 03-26-2010 03:31 PM

Using z-index and position. Take a look at http://www.w3schools.com/Css/pr_pos_z-index.asp

**Joseph Witchard** · 03-26-2010 04:28 PM

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?

**skywalker2208** · 03-26-2010 05:02 PM

Originally Posted by Joseph Witchard

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>

**Joseph Witchard** · 03-27-2010 12:48 AM

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?

**DaiLaughing** · 03-27-2010 01:56 AM

Example of dropdown menu using CSS

Instructions on how to make that dropdown menu

**skywalker2208** · 03-27-2010 03:05 PM

Originally Posted by Joseph Witchard

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.

**Joseph Witchard** · 03-27-2010 09:02 PM

All right, thank you.

Thread: [RESOLVED] Dropdowns Like This Forum

Thread Tools

Display

[RESOLVED] Dropdowns Like This Forum

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions