2016-02-13 66 views
0

我在點擊導航菜單圖標顯示導航菜單時遇到了一些麻煩。在菜單點擊後製作非bootstrap導航欄

HTML

nav role="navigation" class="navbar"> 
    <div class="nav-header"> 
     <a href="#"><span style="font-family: 'Cabin Sketch', cursive; font-size: 1.4em;">Testy Testy Web</span></a> 
     <a href="#menu" id="toggle"><span><i class="fa fa-bars"></i></span></a> 
    </div> 
    <div id="menu"> 
     <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#services">Services</a></li> 
     <li><a href="#pricing">Pricing</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

CSS

nav {width: 100%; position: fixed; text-align: left; background-color: #404040; z-index: 999;} 
nav ul li {display: inline;} 
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;} 
nav a:hover {background-color: #1AA2D4;} 
.nav-header a {display: inline-block;} 
#toggle {float: right; display: none;} 

@media (max-width: 592px) { 
    .splash p {font-size: 1em;} 
    .splash h1 {font-size: 8em;} 
    nav {width: 100%; position: fixed; top: 0; text-align: left; background-color: #404040; z-index: 999;} 
    nav ul li {display: block; float: left; clear: left; width: 100%; clear: bottom;} 
    nav ul {width: 100%;} 
    nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;} 
    #toggle {float: right; display: block;} 
    #menu {display: none;} 

的JavaScript/jQuery的

$(document).ready(function(){ 

$('#toggle').click(function(){ 
     $('#menu').css('display', 'visible'); 
    }); 

}); 

基本上,我有它即T他的導航鏈接在小屏幕上顯示時是隱藏的,但是我正在努力弄清楚如何讓jQuery在點擊切換圖標時可見。我知道這是Bootstrap中的一個標準,但我構建的網站並未使用框架。

有人能夠讓我知道我做錯了什麼。

感謝

+0

你試過'$( '#菜單')。顯示()'? –

+0

$('#menu').css('display','visible'); - 沒有可見的顯示值 - 在這裏檢查 - http://www.w3schools.com/cssref/pr_class_display.asp - 你可以做 - $('#menu')。css('display' , '沒有'); - 隱藏 - $('#menu')。css('display',''); - 顯示 – Tasos

回答

1

display屬性獲取blockinlineinline-blocknone值。要顯示菜單,你應該改變這一行:

$('#menu').css('display', 'visible'); 

要:

$('#menu').toggle(); 

更多:

$('#menu').css('display', 'block'); 

您也可以在每次點擊爲了隱藏和顯示菜單使用toggle使用信息togglehttp://api.jquery.com/toggle/

+0

這似乎還沒有工作:/ – SuperEpicMan

+0

我也試過這樣的:$(document).ready(function(){(012)} ('#menu')。addClass('menu-visible'); \t}) }) – SuperEpicMan

+0

似乎現在工作。我認爲一些問題是我在jQuery CDN鏈接之前列出了我的自定義腳本文件。 – SuperEpicMan

0

您可以使用切換類。定義了一個可以切換顯示/隱藏菜單的新菜單「菜單」。熟悉你的代碼,你可以用這個代替現有的代碼。

$(document).ready(function(){ 
 

 
    $("#toggle").click(function(){ 
 
     $("#menu").toggleClass("menu"); 
 
    }); 
 

 
});
nav {width: 100%; position: fixed; text-align: left; background-color: #404040; z-index: 999;} 
 
nav ul li {display: inline;} 
 
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;} 
 
nav a:hover {background-color: #1AA2D4;} 
 
.nav-header a {display: inline-block;} 
 
#toggle {float: right; display: none;} 
 

 

 
@media (max-width: 592px) { 
 
    .splash p {font-size: 1em;} 
 
    .splash h1 {font-size: 8em;} 
 
    nav {width: 100%; position: fixed; top: 0; text-align: left; background-color: #404040; z-index: 999;} 
 
    nav ul li {display: block; float: left; clear: left; width: 100%; clear: bottom;} 
 
    nav ul {width: 100%;} 
 
    nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;} 
 
    #toggle {float: right; display: block;} 
 
\t #menu {display:none;} 
 
    
 
    .menu {display:block!important;} 
 
    } 
 
\t
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <nav role="navigation" class="navbar"> 
 
     <div class="nav-header"> 
 
      <a href="#"><span style="font-family: 'Cabin Sketch', cursive; font-size: 1.4em;">Testy Testy Web</span></a> 
 
      <a href="#menu" id="toggle"><span><i class="fa fa-bars"></i>Menu</span></a> 
 
     </div> 
 
     <div id="menu"> 
 
      <ul> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#services">Services</a></li> 
 
      <li><a href="#pricing">Pricing</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>