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

两个类似的语法菜单 - 页脚工作;标题中的那个没有

1 个答案: