Question

我正在使用导航栏的移动版本，所以我有汉堡包菜单，当我点击它时它会拉出菜单。使用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>

Answer 1

将heading更改为inherit似乎有效。

#heading {
  position: inherit; 
}

Answer 2

#heading {  
    vertical-align: top;
}

也可以做到这一点。

当我隐藏元素并显示另一个元素时，Div正在移动

2 个答案: