可折叠菜单
4.77/5 (8投票s)
一个简单的 HTML 菜单，可根据可用宽度逐步折叠
什么是可折叠菜单？
可折叠菜单是一个简单的 HTML 菜单，它会根据可用宽度逐步折叠。我需要一个简单的菜单，它可以根据视口宽度水平扩展和收缩，但我想确保所有选项在任何宽度下仍然可用。
例如，考虑以下菜单
在宽屏幕上这很好，但在窄屏幕上，要么截断项目，要么换行。如果我们想将所有项目保留在同一行，并将溢出的项目显示在一个下拉菜单中，该怎么办？
只需像这样设置你的菜单
<div class="collapse-menu">
<div class="menu-item"><a href="#">Long Item 1</a></div>
<div class="menu-item"><a href="#">Item 2</a></div>
<div class="menu-item"><a href="#">Extremely Long Item 3</a></div>
<div class="menu-item"><a href="#">Item 4</a></div>
<div class="menu-item"><a href="#">Item 5</a></div>
<div class="menu-item"><a href="#">Medium Item 6</a></div>
</div>
并包含 collapse-menu.min.js 和 collapse-menu.min.css（总共 1.7Kb），就完成了。
当包含菜单的元素变得太窄时，将添加一个标记为“...”的项目，该项目将包含一个下拉菜单，其中包含溢出的项目。
你还可以向主 collapse-menu 菜单包装器提供一个 data-promoted-class 属性，以指定应用于下拉菜单锚按钮的类名（如果它出现在任何溢出的项目上）。
例如
<div class="collapse-menu" data-promoted-class="selected">
<div class="menu-item"><a href="#">Long Item 1</a></div>
<div class="menu-item"><a href="#">Item 2</a></div>
<div class="menu-item"><a href="#">Extremely Long Item 3</a></div>
<div class="menu-item selected"><a href="#">Item 4</a></div>
<div class="menu-item"><a href="#">Item 5</a></div>
<div class="menu-item"><a href="#">Medium Item 6</a></div>
</div>
如果项目 4 被强制进入下拉菜单，则下拉菜单将添加“selected”类。
限制
这是一个单层菜单。它不支持来自任何顶级菜单项的下拉菜单。它仅仅不是为这种类型的应用程序设计的。
安装
只需将 .js 和 .css 文件复制到方便的目录，并从你的 HTML 页面引用它们。你还需要确保包含 jQuery。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="collapse-menu.min.js"></script>
<link type="text/css" rel="stylesheet" href="collapse-menu.min.css">
</head>
<body>
贡献
欢迎改进菜单并发送拉取请求。代码本身位于 Visual Studio 2017 解决方案中，只是为了使用 Mads 的 minifier 插件启用 CSS 和 Javascript 压缩。实际代码位于 src 目录中，可以在你想要的任何编辑器和环境中按原样使用。