在菜单点击后制作非bootstrap导航栏

Question

我在点击导航菜单图标显示导航菜单时遇到了一些麻烦。

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中的一个标准，但我构建的网站并未使用框架。

有人能够让我知道我做错了什么。

感谢

Answer 1

display属性获取block，inline，inline-block和none值。要显示菜单，你应该改变这一行：

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

要：

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

更多：

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

您也可以在每次点击为了隐藏和显示菜单使用toggle使用信息toggle： http://api.jquery.com/toggle/

Answer 2

您可以使用切换类。定义了一个可以切换显示/隐藏菜单的新菜单“菜单”。熟悉你的代码，你可以用这个代替现有的代码。

$(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>