javascript - 具有 "More"选项作为菜单选项的响应式菜单开始溢出父菜单

Question

基本上我有一个带有 11 个链接的导航栏，我希望它能够响应。目标是，随着窗口变窄，第 12 个链接将显示为包含第 11 个元素、第 10 个元素等的 ddl。链接中的文本长度因语言而异，因此链接的宽度不相等。

这是标记的示例(部分)。
https://jsbin.com/fijakipesu/edit?html

实现此目标的最佳方法是什么？

starting screen

Answer 1

创建按钮，然后为桌面用户隐藏它并显示完整的导航。使用 @media，您可以显示按钮并隐藏移动设备的导航项。

当用户点击按钮或将其悬停时，他们会获得导航项。

HTML:

    <button class='menu-button0'>Click me</button>
    <div id='showMe'>link1, link2, link3</div>

CSS，当移动设备访问您的页面时:

    #showMe(display:none;)
    .menu-button0:hover + #showMe{display:block;}

CSS，当桌面设备访问您的页面时:

   .menu-button0{display:none;}