當我打開我的導航欄時，爲什麼所有頁面都會移動？

我試圖讓導航欄，當我打開僅導航欄移動，而不是所有的頁面舉動像現在當我打開我的導航欄時，爲什麼所有頁面都會移動？

我下面的代碼： - 頭：

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

當導航欄打開單詞「你好」下降。我希望單詞和頁面的其餘部分不會改變位置。我試圖用jQuery來做到這一點，但我不成功。

來源

2016-11-22 Mr Lord

huehuehuehuehue創建一個[jsfiddle]（https://jsfiddle.net/），所以我們可以看到問題請huehuehuehuehue – TheWandererr

我想用JavaScript來做到這一點。 ccs不相關。 –

CSS是相關的;這是一個定位問題。雖然您可以通過JavaScript添加或刪除CSS，但您仍然需要調整菜單的「位置」。 – rfornal

它與定位做到：儘量...

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

注：位置：絕對的;背景顏色：白色;添加了。

編輯

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

EDIT 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%;">

...記下窗體上的寬度和位置。

來源

2016-11-22 15:14:38 rfornal

它仍然移動所有頁面 –

我添加了一個小提琴顯示此解決方案工作（沒有圖像，但其他所有作品）。 – rfornal

我的錯誤'我把它複製到其他頁面，它的作品 –

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

可能發生的情況是您的菜單不是固定或絕對定位元素，這會導致頁面的其餘部分適應菜單的大小更改。你可以閱讀更多關於位置類型在這裏：

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

來源

2016-11-22 15:11:58 FvB

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是一個工作示例。

來源

2016-11-22 15:22:48

當我打開我的導航欄時，爲什麼所有頁面都會移動？

回答

相關問題