為什么打開導航欄時所有頁面都移動？

Question

我試圖讓導航欄時，我只開放導航欄移動，而不是所有的頁面舉動像現在

我的代碼如下：-頭：

<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>

身體：

<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>

當導航欄打開時，單詞“ Hello”下降。 我希望這個詞和頁面的其余部分不改變位置。 我正在嘗試使用jquery來執行此操作，但是我不成功。

Answer 1

它與定位有關：嘗試...

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

注意： position：絕對； 背景顏色：白色； 添加。

編輯

小提琴： https : //jsfiddle.net/rfornal/wptb8fp3/

編輯2

要按照以下要求設置相對於<form>的寬度，設置表單的寬度設置的寬度，還需要指定`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%;">

...注意表格的寬度和位置。

Answer 2

這可能是CSS問題。 在正常情況下，所有DOM元素都將創建為“塊”，這意味着它們彼此之間出現。 默認情況下（並使用“ display：inline;”強制使用）有一些例外，例如SPAN元素。

可能發生的情況是您的菜單不是固定位置或絕對位置元素，這會導致頁面的其余部分根據菜單的大小變化進行調整。 您可以在此處閱讀有關職位類型的更多信息：

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"

這是一個工作示例。