当我隐藏一个元素并显示另一个元素时，Div正在移动
[英]Div is moving when I hide an element and show another element
问题描述
I am working on a mobile version of a nav bar so I have the hamburger menu and when I click on it it pulls out the menu. 
我正在开发导航栏的移动版本，因此我有汉堡菜单，当我单击它时，它会拉出菜单。 The hamburger icon is hidden with Javascript and CSS and then Javascript shows an 'X' icon so that the user can close the menu and go back to the webpage. 汉堡包图标被Javascript和CSS隐藏，然后Javascript显示“ X”图标，以便用户可以关闭菜单并返回到网页。 But when the 'X' icon shows up it moves the title a little to the left and down. 但是，当显示“ X”图标时，它将标题向左和向下移动一点。 I've checked margins and padding and borders and its just empty space above the title. 我已经检查了页边距，边距和边框以及标题上方的空白区域。 What can I do to make it so my title doesn't move? 我该怎么做才能使标题保持不变？ The empty picture is the 'X' icon. 空白图片是“ X”图标。
var main = function() { /* Push the nav over by 285px over */ $('.hamburger').click(function() { $('#menu').animate({ left: "0px" }, 200); $('.hamburger').hide(); $('.close').show(); }); /* Then push them back */ $('.close').click(function() { $('#menu').animate({ left: "-100%" }, 200); $('.hamburger').show(); $('.close').hide(); }); }; $(document).ready(main);
@font-face { font-family: Call_of_Ops_Duty; src: url('../fonts/Call_of_Ops_Duty.otf'); } body { margin:0; } .header { background-color:#0D47A1; width:100%; height:56px; line-height:56px; display:block; position:absolute; } .hamburger { position: relative; display: inline-block; width: 1.25em; height: 0.8em; margin-right: 0.3em; border-top: 0.2em solid #fff; border-bottom: 0.2em solid #fff; z-index:8; } .hamburger:before { content: ""; position: absolute; top: 0.3em; left: 0px; width: 100%; border-top: 0.2em solid #fff; } .close { display:inline-block; position: relative; left:5%; top:7%; height:40px; width:40px; display:none; } /*.close img { position:relative; width:40px; height:40px; display:none; }*/ #heading { position:relative; display:inline-block; left:15%; top:0; font-family: Call_of_Ops_Duty; color:white; font-size:18px; } #heading font { font-size:14px; } span { padding-left:2%; left:7%; } #menu { position:fixed; top:56px; left:-100%; width:100%; height:100%; z-index:10; background-color:gray; } #menu ul { top:25%; list-style:none; padding-left:0; } #menu a { text-decoration:none; color:black; } #menu li { font-family: Call_of_Ops_Duty; font-size:24px; text-align:center; } #menu li:first-child { top:56px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"> <link type="text/css" rel="stylesheet" href="css/header.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="js/header.js"></script> <body> <div class="header"> <span class="hamburger"></span> <img class="close" src="img/X.png"> <div id="heading"> Title </div> <div id="menu"> <ul> <li><a href="CellHome.php">Home</a></li> <li><a href="CellWhyroot.php">Root</a> <ul> <li><a href="CellBestRootApps.php">Root Apps</a></li> </ul> </li> <li><a href="jailbreak.php">Jailbreak</a> <ul> <li><a href="Jailbreakapp.php">Jailbreak Apps</a></li> </ul> </li> <li><a href="contact.php">Contact Me</a></li> <!--<li><a href="CellLogin.php">Appointment</a></li>--> </ul> </div> </div> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2015-07-07 18:14:16
Changing heading to inherit seems to work. 将heading更改为inherit似乎可行。
#heading {
position: inherit;
}
解决方案2
0 2015-07-07 19:13:51
#heading {
vertical-align: top;
}
Would do the trick as well. 也会做到的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.