两个语法相似的菜单-页脚中的菜单起作用;标头中的那个没有

Question

我正在学习制作菜单。在一个教程中，我学会了制作手机友好菜单(http://designshack.net/articles/css/responsive-slide-down-navigation)。我创建的页面位于http://nspowers.org/ask/why-menu并且使用用于链接的列表。

页脚中的链接有效。但是，顶部菜单中语法相同的链接不会链接。

以下是工作页脚导航的结构：

<footer id="hfooter">
  <div class="footer_nav">
     <nav>
        <ul>
          <li> <a href="#">Home</a> </li>
          <li> <a href="./work.html">Work</a> </li>
          <li> <a href="./about.html">About</a> </li>
          <li> <a href="./contact.html">Contact</a> </li>
        </ul>
     </nav>
   </div>
          <div class="copyright">&copy</div>
</footer>

这是不起作用的顶部导航结构：

    <header id="topnav">
    <nav>
      <ul>
        <li> <a href="./work.html">WORK</a> </li>
        <li> <a href="./about.html">ABOUT</a> </li>
        <li> <a href="./contact.html">CONTACT</a> </li>
      </ul>
    </nav>
    <a href="#" id="navbtn">Nav Menu</a>        
    <h1><a href="./index.html">This is the 'home' page</a></h1>
    </header><!-- @end #topnav -->

css在这里：http://nspowers.org/ask/why-menu/styles.css.

我想了解除了我在教程中看到的链接语法之外，还有哪些其他变量可能会影响成功的链接。

Answer 1

解决了它。

1） 首先，来自文件的menu.js在第三部分中有以下内容：

$('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
e.preventDefault(); // stop all hash(#) anchor links from loading
});

谢谢http://disqus.com/ashearlam，这不需要在那里。删除它。它本应阻止菜单在移动视图中链接。但是，没有它也能正常工作。工作菜单.js如下：

$(function(){
var nb = $('#navbtn');
var n = $('#topnav nav');
$(window).on('resize', function(){
if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
  // if the nav menu and nav button are both visible,
  // then the responsive nav transitioned from open to non-responsive, then back again.
  // re-hide the nav menu and remove the hidden class
  $('#topnav nav').hide().removeAttr('class');
}
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
  // if the navigation menu and nav button are both hidden,
  // then the responsive nav is closed and the window resized larger than 560px.
  // just display the nav menu which will auto-hide at <560px width.
  $('#topnav nav').show().addClass('keep-nav-closed');
  }
}); 
$('#navbtn').on('click', function(e){
e.preventDefault();
$("#topnav nav").slideToggle(350);
});
});

2） 该网页缺少移动元视口，因此在移动设备上查看时，该网站没有缩小到移动视图。添加元，

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

解决了这个问题。

工作版本可在此处找到：http://nspowers.org/ask/menu-solved