可折叠的菜单栏

Question

我正在寻找一个可折叠的菜单栏（如Foundation或Bootstrap）。

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

有没有人知道如何制作一个教程？

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;}

    }

Team 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);
        }
    });

}

来自here的此功能会根据CSS中预定义的宽度调整菜单大小。

我找到的最好的“教程”实际上是在窃取我网站的其他人的代码，然后调整它直到看起来不像他们的。 metsales提供的链接也非常好。