2016-01-11 610 views
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 -->

回答

0

我想通了。我的header div內有nav-btn。我在做這個.header {display: none;},它不允許我的按鈕在我的媒體查詢中顯示。

對於那些看起來,謝謝。