javascript - 隐藏图像后显示图像

标签 javascript jquery html css menu

我正在制作滑出式导航屏幕。我让水平滑出菜单在没有媒体查询的情况下完美工作，但是当我尝试将我的滑出导航菜单添加到我的普通导航菜单时，我无法在 max-width: 640px; 的媒体屏幕中显示三行汉堡菜单图像。当正常导航菜单显示时，我隐藏了 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 -->

最佳答案

我想通了。我的 header div 中有 nav-btn。我正在做这个 .header {display: none;} 不允许我的按钮显示在我的媒体查询中。

对于看过的人，谢谢。

关于javascript - 隐藏图像后显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34725127/

上一篇：css - LESS 无法识别的输入

下一篇：html - 当我将此 ul 添加到 div 时，它之前的 div 位置较低。我怎样才能让他们坐在同一高度

相关文章：

javascript - 检查浏览器是否支持移动设备的 SVG，最好是 Android

javascript - Angularjs <select> 在 ng-options 更新时不调整高度

javascript - 函数即使被调用也不会触发

javascript - JQuery 不适用于大小为 1 的数组

javascript - 测试自定义 Angular Directive(指令)是否显示/隐藏元素

html 表单和负顶部 css 值

javascript - JS Slider 覆盖了我的导航 div——不知道为什么

javascript - 如何在 Angular 中淡入和淡出组件

javascript - 你会如何在输入内容时让预先写好的文本出现？

javascript - 是否可以使用 JavaScript 和 cscript 枚举 ADO Recordset 的字段名称？

©2024 IT工具网  联系我们