为什么打开导航栏时所有页面都移动？

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.