Question

首次发布Stack Overflow。

想知道是否有人可以指导我正确的方向我正在修改网站的响应式菜单。我认为演示是最好的解释方式，它是here。

折叠到移动尺寸时，只显示一个灰色的菜单框，单击该按钮会显示菜单。我想要的是在全尺寸下显示相同的情况。换句话说，而不是我想要的类别的水平条只有那个灰色框，所以当点击它显示移动大小的垂直菜单（当然，在更大我会使菜单更宽）。我认为用媒体查询中的内容替换一些常规CSS会做到这一点但结果却是松散的。：d

我希望我已经解释了这一点。

Answer 1

为了便于使用，我建议不要让桌面版的行为与移动版相似。如果您在桌面上的房地产行为与智能手机上的房地产一样有限，您的网站将变得更难使用。

我绝对建议，当你有空间展示某些东西时，请展示它。请参阅Nielsen Norman Group: Killing off the Global Navigation: One Trend to Avoid。

Answer 2

有这么多框架在做这件事。

您可以使用Bootstrap导航栏： http://getbootstrap.com/components/#navbar

Answer 3

您应该在script.js（ adjustMenu 功能）中删除屏幕宽度的条件，它应该如下所示 -

var adjustMenu = function() {
   $(".toggleMenu").css("display", "inline-block");
       if (!$(".toggleMenu").hasClass("active")) {
          $(".nav").hide();
       } else {
          $(".nav").show();
       }
       $(".nav li").unbind('mouseenter mouseleave');
       $(".nav li a.parent").unbind('click').bind('click', function(e) {
       // must be attached to anchor element to prevent bubbling
       e.preventDefault();
       $(this).parent("li").toggleClass("hover");
   });
}

编辑：更新小提琴

Fiddle（展开结果框）

响应式菜单显示

3 个答案: