Почему вся страница движется, когда я открываю свой Navbar?

Question

Я пытаюсь сделать Navbar, когда я открыт только панели Navbar хода и не все страницы двигаться, как сейчас

Моего код ниже: - Руководителя:

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

Когда navbar откроет слово «Привет», опуститесь. Я хочу, чтобы слово и остальная часть страницы не меняли позицию. Я пытаюсь сделать это с помощью 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;"> 

Обратите внимание на: положение: абсолютный; background-color: white; добавлен.

EDIT

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

EDIT 2

Чтобы установить ширину относительно <form>, как вы просили ниже, ширина ширина набора формы, а также необходимо указать «положение: относительное».

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

Here является рабочим примером.