0
我正在使用滑動導航屏幕。我的水平滑出菜單無需媒體查詢即可完美工作，但當我嘗試將我的滑出式導航菜單添加到正常的導航菜單時，我無法在max-width: 640px;的媒體屏幕上顯示三行漢堡菜單圖像。當正常的導航菜單顯示時，我隱藏了nav-btn（菜單圖像），但我希望nav-btn在屏幕較小時允許我打開菜單。隱藏圖像後顯示圖像
有沒有人看到爲什麼我的nav-btn不會顯示在我的媒體查詢中？
\t //open the lateral panel
\t $('.nav-btn').on('click', function(event){
\t \t event.preventDefault();
\t \t $('.nav-panel').addClass('is-visible');
\t });
\t //clode the lateral panel
\t $('.nav-panel').on('click', function(event){
\t \t if($(event.target).is('.nav-panel') || $(event.target).is('.nav-panel-close')) {
\t \t \t $('.nav-panel').removeClass('is-visible');
\t \t \t event.preventDefault();
\t \t }
\t });.nav_list {
\t text-decoration: none;
\t background-color: #F0F0F0;
\t margin: 0;
\t list-style: none;
\t text-align: right;
\t width: 100%;
\t padding: 0;
}
.nav_list > a {
\t display: inline-block;
\t padding: 25px 15px;
\t text-decoration: none;
}
.nav_list > a > li {
\t text-decoration: none;
\t font-size: 1.2em;
\t color: #45a5ba;
}
.nav_list > a:hover {
\t color: #FFF;
\t background-color: #CCC;
}
.nav-btn {
display: none;
}
/*.nav-panel {
\t \t display: none;
\t }*/
@media screen and (max-width:640px) {
\t .header {
\t \t display: none;
\t }
\t .nav-panel {
\t \t display: block;
\t }
\t .nav_list {
\t text-decoration: none;
\t background-color: #F0F0F0;
\t margin: 0;
\t list-style: none;
\t text-align: right;
\t width: 100%;
\t padding: 0;
}
.nav_list > a {
\t display: block;
\t padding: 15px 15px;
\t text-decoration: none;
\t /*border-bottom: 1px solid #FFF;*/
}
.nav_list > a > li {
\t text-decoration: none;
\t font-size: 1.2em;
\t color: #45a5ba;
}
.nav_list > a:hover {
\t color: #FFF;
\t background-color: #CCC;
}
.nav-btn {
\t position: absolute;
\t display: block;
\t right: 2%;
\t 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">
\t \t <div class="header_wrap">
\t \t \t <div class="logo">Optimum Designs</div>
\t \t \t <nav>
\t <a href="#0" class="nav-btn"><img src="http://optimumwebdesigns.com/icons/mobile_menu_bttn.png" style="height: 28px; width: 28px;"></a>
\t \t \t \t <!-- <span class="nav-btn"></span> -->
\t \t \t \t <ul class="nav_list">
\t \t \t \t \t <a href="#"><li>Home</li></a>
\t \t \t \t \t <a href="#"><li>Work</li></a>
\t \t \t \t \t <a href="#"><li>Approach</li></a>
\t \t \t \t \t <a href="#"><li>Company</li></a>
\t \t \t \t \t <a href="#"><li>Services</li></a>
\t \t \t \t \t <a href="#"><li>Contact</li></a>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </div>
\t </header>
\t <main class="cd-main-content">
\t \t <h1>Slide In Panel</h1>
\t </main>
\t <div class="nav-panel from-right">
\t \t <header class="nav-panel-header">
\t \t \t <div id="nav-slide-title">Menu</div>
\t \t \t <a href="#0" class="nav-panel-close">Close</a>
\t \t </header>
\t \t <div class="nav-panel-container">
\t \t \t <div class="nav-panel-content">
\t \t \t \t <ul class="nav_list">
\t \t \t \t \t <a href="#"><li>Home</li></a>
\t \t \t \t \t <a href="#"><li>Work</li></a>
\t \t \t \t \t <a href="#"><li>Approach</li></a>
\t \t \t \t \t <a href="#"><li>Company</li></a>
\t \t \t \t \t <a href="#"><li>Services</li></a>
\t \t \t \t \t <a href="#"><li>Contact</li></a>
\t \t \t \t </ul>
\t \t \t </div> <!-- nav-panel-content -->
\t \t </div> <!-- nav-panel-container -->
\t </div> <!-- nav-panel -->