兩個類似的語法菜單 - 頁腳中的一個工作;標題中的那個不是

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，這並不需要在那裏。刪除它。它應該阻止菜單在移動視圖內鏈接。但是，沒有它就可以正常工作。工作menu.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