在320像素屏幕上未打开的响应式菜单

我正试图为响应式菜单实现此（http://www.hongkiat.com/blog/responsive-web-nav/）脚本。我遵循所有步骤并使用了正确的代码，但菜单不会以320像素的宽度打开。任何人都可以给我一个关于如何解决这个问题？仅供参考：我是脚本编写的新手。在320像素屏幕上未打开的响应式菜单

非常感谢！

<?php 

defined('_JEXEC') or die; 

$doc = JFactory::getDocument(); 
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css'); 
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css'); 
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css'); 

?> 

<!DOCTYPE html> 
<html> 
<head> 
    <jdoc:include type="head" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="normalize.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
     $(function() { 
      var pull  = $('#pull'); 
       menu  = $('nav ul'); 
       menuHeight = menu.height(); 

      $(pull).on('click', function(e) { 
       e.preventDefault(); 
       menu.slideToggle(); 
      }); 

      $(window).resize(function() { 
       var w = $(window).width(); 
       if(w > 320 && menu.is(':hidden')) { 
        menu.removeAttr('style'); 
       } 
      }); 
     }); 
    </script> 

</head> 

<body> 
    <nav class='clearfix'> 
     <ul class='clearfix'> 
      <li><a href="#seapr">Sea PR?</a></li> 
      <li><a href="#seaprvoor">Sea PR voor...</a></li> 
      <li> <a href="#pr">Press Relations</a></li> 
      <li><a href="#copywriting">Copywriting</a></li> 
      <li><a href="#websites">Websites</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     <a href="#" id="pull">Menu</a> 
    </nav> 
</body> 
</html>

来源

2014-01-15 user3198145

供参考e，'pull'已经是一个jQuery对象。不需要'$（pull）'。 – BenM

你应该考虑媒体查询http://css-tricks.com/css-media-queries/ – simonlchilds

您可能需要删除此：

 $(window).resize(function() { 
      var w = $(window).width(); 
      if(w > 320 && menu.is(':hidden')) { 
       menu.removeAttr('style'); 
      } 
     });

与

 $(window).resize(function() { 
      if(menu.is(':hidden')) { 
       menu.removeAttr('style'); 
      } 
     });

来源

2014-01-15 12:56:55 Pete

我想这是皮特和费利克斯的答案的组合。您使用的代码禁用了小屏幕宽度的菜单，可能不会与内容重叠（'w> 320'）。 –

我尝试过皮特和费利克斯的解决方案和两者的结合，但没有一个能够让它工作。 – user3198145

@ user3198145尝试将您的jQuery版本更新为1.10.1，并且如果您查看了您的js控制台，是否显示任何错误？ – Pete

替换它通过你的演示站点的源之后，轮到了，你有没有包括nav.js文件：

<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>

来源

2014-01-15 13:00:26 Felix

在320像素屏幕上未打开的响应式菜单

回答

相关问题