Home/ Questions/Q 6008629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:51:06+00:00

Hihi, I am trying to create a slide down menu using DIV, but hit

  • 0

Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can’t really figure out how to overcome. Let’s take a look at the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu").click(function () {
                $('#menuItem').slideDown('slow');
            });
        });
    </script>
</head> 
<body> 
    <div style="width: 500px; margin: 0px auto; padding: 10px;">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!

🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied top:40px to the content div to push it down to compensate for the height of the menu. 

    <div style="position:absolute;width:100%;">
    <div style="width: 500px; margin: 0px auto; padding: 10px; ">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right;  display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>
</div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;  position:relative; top:40px; ">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" clear:both;  z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

    As I type this, dotty’s already answered before me with a pretty much identical approach. However, in the code above, the individual menu divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.

    There are probably some div and styling elements that are a little redundant there now.

    Edit: It does occur to me now that the operation of the menu in dotty’s code is actually probably how you intended for the menu to be.

    • 0