隐藏后显示图像

时间：2016-01-11 15:25:49

标签： javascript jquery html css menu

我正在使用滑出式导航屏幕。我得到了水平滑出菜单，可以在没有媒体查询的情况下完美地工作，但是当我尝试将我的滑出导航菜单添加到我的常规导航菜单时，我无法在{{{}的媒体屏幕中显示三行汉堡包菜单图像。 1}}。当显示正常的导航菜单时，我隐藏了nav-btn（菜单图像），但是当我到达较小的屏幕尺寸以允许我打开菜单时，我想要显示nav-btn。

有没有人知道为什么我的nav-btn不会在我的媒体查询中显示？

	//open the lateral panel
	$('.nav-btn').on('click', function(event){
		event.preventDefault();
		$('.nav-panel').addClass('is-visible');
	});
	//clode the lateral panel
	$('.nav-panel').on('click', function(event){
		if( $(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close') ) { 
			$('.nav-panel').removeClass('is-visible');
			event.preventDefault();
		}
	});
.nav_list {
	text-decoration: none;
	background-color: #F0F0F0;
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav_list > a {
	display: inline-block;
	padding: 25px 15px;
	text-decoration: none;
}
.nav_list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #45a5ba;
}
.nav_list > a:hover {
	color: #FFF;
	background-color: #CCC;
}
.nav-btn {
     display: none;
}
/*.nav-panel {
		display: none;
	}*/

@media screen and (max-width:640px) {
	.header {
		display: none;
	}
	.nav-panel {
		display: block;
	}
	.nav_list {
	text-decoration: none;
	background-color: #F0F0F0;
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav_list > a {
	display: block;
	padding: 15px 15px;
	text-decoration: none;
	/*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #45a5ba;
}
.nav_list > a:hover {
	color: #FFF;
	background-color: #CCC;
}
.nav-btn {
	position: absolute;
	display: block;
	right: 2%;
	top: 3%;
}
.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 1s;
  -moz-transition: visibility 1s;
  transition: visibility 1s;
}
.nav-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  -webkit-transition: background 0.8s 0.8s;
  -moz-transition: background 0.8s 0.8s;
  transition: background 0.8s 0.8s;
}
.nav-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.nav-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.nav-panel.is-visible .nav-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.nav-panel.is-visible .nav-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@-moz-keyframes cd-close-1 {
  0%, 50% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(45deg);
  }
}
@keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@-webkit-keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}
@-moz-keyframes cd-close-2 {
  0%, 50% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(-45deg);
  }
}
@keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
.nav-panel-header {
  position: fixed;
  width: 70%;
  height: 50px;
  line-height: 50px;
  background: rgba(255, 255, 255, 0.96);
  z-index: 2;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  -webkit-transition: top 0.3s 0s;
  -moz-transition: top 0.3s 0s;
  transition: top 0.3s 0s;
}
#nav-slide-title {
  font-weight: bold;
  color: #45a5ba;
  padding-left: 5%;
}
.from-right .nav-panel-header, .from-left .nav-panel-header {
  top: -50px;
}
.from-right .nav-panel-header {
  right: 0;
}
.from-left .nav-panel-header {
  left: 0;
}
.is-visible .nav-panel-header {
  top: 0;
  -webkit-transition: top 0.3s 0.3s;
  -moz-transition: top 0.3s 0.3s;
  transition: top 0.3s 0.3s;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
		<div class="header_wrap">
			<div class="logo">Optimum Designs</div>
			<nav>
	<a href="#0" class="nav-btn"><img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;"></a>
				<!-- <span class="nav-btn"></span> -->
				<ul class="nav_list">
					<a href="#"><li>Home</li></a>
					<a href="#"><li>Work</li></a>
					<a href="#"><li>Approach</li></a>
					<a href="#"><li>Company</li></a>
					<a href="#"><li>Services</li></a>
					<a href="#"><li>Contact</li></a>
				</ul>
			</nav>
		</div>
	</header>
	<main class="cd-main-content">
		<h1>Slide In Panel</h1>
	</main>

	<div class="nav-panel from-right">

		<header class="nav-panel-header">
			<div id="nav-slide-title">Menu</div>
			<a href="#0" class="nav-panel-close">Close</a>
		</header>

		<div class="nav-panel-container">
			<div class="nav-panel-content">
				<ul class="nav_list">
					<a href="#"><li>Home</li></a>
					<a href="#"><li>Work</li></a>
					<a href="#"><li>Approach</li></a>
					<a href="#"><li>Company</li></a>
					<a href="#"><li>Services</li></a>
					<a href="#"><li>Contact</li></a>
				</ul>
			</div> <!-- nav-panel-content -->
		</div> <!-- nav-panel-container -->
	</div> <!-- nav-panel -->

1 个答案:

答案 0 :(得分：0)

我明白了。我的nav-btn div中有header。我正在执行此.header {display: none;}，这不允许我的按钮显示在我的媒体查询中。

对于那些看起来的人，谢谢。

相关问题
最新问题