可折叠菜单栏

Question

我正在寻找一个可折叠菜单栏(如基金会或引导)。

除了菜单栏之外，我不需要任何其他组件。我知道我可以下载自定义组件，但我更愿意学习如何从头开始制作一个组件，这样我就可以更好地理解它们是如何工作的。

有人知道如何制作教程吗？

Answer 1

这里有一个直接链接到一个伟大的文件。信息非常丰富..。

http://getbootstrap.com/examples/navbar-static-top/

它不提供任何CSS，但您可以检查某些元素(f12或右键单击: inspect )并发现它们的CSS属性，然后自己尝试。

里面有很多信息，这可能会有点让人难以抗拒。尤其是他们提供的所有代码。试着慢慢阅读，因为它真的包含了制作一个导航条所需的所有信息，尤其是符合你标准的导航条。

另一个很好的链接是在这里：

http://jqbox.webflow.com/

向您展示一切，包括JQuery代码。如果您想要CSS相同的情况，但由于它不是引导程序，您可以获得具有相同检查元素特性的物理CSS或直接链接到样式表的http://jqbox.webflow.com/jqbox.webflow.css

Answer 2

在不提供直接链接的情况下，您可以尝试使用媒体查询。

例如：

    /*NAV BAR*/
    #nav { display: block}
    #mobile-nav { display: hidden;}

   @media screen and (max-width:320px) { 

     #mobile-nav { display: block;} 
     #nav { display: hidden;}

    }

Treehouse有一篇关于创建纯CSS移动菜单的不错的博客文章。我对像他们这样的纯CSS菜单唯一的问题是，如果你按照他们的指示，打开菜单需要你点击一个菜单选项来摆脱菜单--没有关闭按钮，你不能通过点击页面的正文来关闭。

JS实现可能包括以下内容

    $('.rmm').each(function() {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', ''); 
        if ( $(this).parent().width() < $width*1.05 ) {
            $(this).children('.rmm-main-list').hide(0);
            $(this).children('.rmm-toggled').show(0);
        }
        else {
            $(this).children('.rmm-main-list').show(0);
            $(this).children('.rmm-toggled').hide(0);
        }
    });

}

来自这里的此函数根据您的CSS中预定义的宽度调整菜单大小。

我发现的最好的“教程”就是盗取别人为我的网站编写的代码，然后修改它，直到它看起来不像他们的那样。元销售提供的链接也很好。