Mr Lord Mr Lord - 17 days ago 4
HTML Question

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

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

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/