當我隱藏一個元素並顯示另一個元素時，Div正在移動
[英]Div is moving when I hide an element and show another element
問題描述
我正在開發導航欄的移動版本，因此我有漢堡菜單，當我單擊它時，它會拉出菜單。 漢堡包圖標被Javascript和CSS隱藏，然后Javascript顯示“ X”圖標，以便用戶可以關閉菜單並返回到網頁。 但是，當顯示“ X”圖標時，它將標題向左和向下移動一點。 我已經檢查了頁邊距，邊距和邊框以及標題上方的空白區域。 我該怎么做才能使標題保持不變？ 空白圖片是“ 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
將heading更改為inherit似乎可行。
#heading {
position: inherit;
}
解決方案2
0 2015-07-07 19:13:51
#heading {
vertical-align: top;
}
也會做到的。
如何在滾動后顯示元素並在輸入另一個元素時隱藏？
[英]How can I show an element after scrolling and hide when entering another element?
隱藏和顯示 div 不起作用，當我使用 console.log() 但不顯示時，元素會更改其屬性
[英]Hide and show a div not working, the element changes its property When I use console.log() but not showing
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.