Why all the page move when I'm open my Navbar?

Question

I'm trying to make the navbar when I'm open only the navbar move and not all the page move like now

My code below:- Head:

<script src="/js/jquery.js"></script>
<script lang="ja" type="text/javascript">
    var i = 0;
    $(document).ready(function () {
        $("#b").click(function () {
            $("#menu").slideToggle("slow");
        });
    });

    function ToggleMenu(loc) {
        $("#menu").slideToggle("slow");

        setTimeout(function () {
            window.location.href = loc;
        }, 750);
    }
</script>

Body:

<form id="form1" runat="server">
    <img id="b" src="/img/ic_menu_black_48dp_2x.png" style="height: 30px; width: 30px; margin-top: -5px; cursor: pointer;" />
    <div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px">
        <a onclick="ToggleMenu('/')" class="navbartxt">Home</a>
        <br />
        <br />
        <a onclick="ToggleMenu('/Account/Register.aspx')" class="navbartxt">Register</a>
        <br />
        <br />
        <a onclick="ToggleMenu('/Account/Login.aspx')" class="navbartxt">Login</a>
    </div>
    <br />
    <br />
    Hello
</form>

When the navbar open the word "Hello" going down. I want the word and the rest of the page not change the position. I am trying to do this with jquery but I am not successful.

Answer 1

It has to do with the positioning: try ...

<div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px; position: absolute; background-color: white;">

Note the: position: absolute; background-color: white; added.

EDIT

Fiddle: https://jsfiddle.net/rfornal/wptb8fp3/

EDIT 2

To set the width relative to the <form> as you asked below, width the form's width set, you also need to specify `position: relative;".

<form id="form1" runat="server" style="width:20%; position:relative;">
  ...
  <div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px; position: absolute; background-color: white; width:100%;">

... note the width's and position on the form.

Answer 2

It's probably a CSS problem. Under normal circumstances, all DOM elements are created as Blocks, meaning they appear below each other. There are some exceptions by default (and forcibly by using "display: inline;"), such as the SPAN element.

What's probably going on is that your menu is not a Fixed or Absolute positioned element, which causes the rest of your page to adjust to the size-change of your menu. You can read more about position types here:

http://www.w3schools.com/csSref/pr_class_position.asp

Answer 3

use position:absolute; in your menu element
style="position:absolute;border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px"

Here is a working example.