javascript - 以 Angular 或其他方式创建响应式顶部菜单(就像 Chrome 在调整页面大小时使用书签栏一样)

标签 javascript jquery html css angularjs

关于如何创建一个导航栏(Angular 1、jQuery、css 等),当页面调整大小时,它的行为类似于 Google Chrome 书签栏,你能指导我或给我一些建议吗?基本上,随着页面尺寸变小,栏上会出现一个新的按钮/符号 (>>)。由于分辨率较小而无法容纳的右侧按钮移至 >> 符号下方。如果您按下该符号,则会出现一个带有隐藏按钮的下拉菜单。当页面达到移动分辨率时,我当然会切换到移动菜单,但我需要在完整菜单和移动设备之间执行此步骤。

当您调整页面大小时,Google Chrome 浏览器可以很好地管理书签栏 View 。如果在 Chrome 中你有很多书签,两个箭头 (>>) 出现在右侧,当你缩小窗口时,更多书签隐藏在这些箭头下。

非常感谢您的帮助。

最佳答案

制作菜单 div overflow:auto 将是最简单的解决方案。这是为此的笨蛋 http://plnkr.co/edit/vAYTGgNnQtH1iE2vsIpS?p=preview

根据您的特殊要求,这里是水平 slider ,末尾带有箭头以处理滚动 https://codepen.io/mahish/pen/RajmQw

关于javascript - 以 Angular 或其他方式创建响应式顶部菜单(就像 Chrome 在调整页面大小时使用书签栏一样),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44956215/

相关文章:

javascript - 自动刷新 JavaScript 代码

javascript - 如何在固定背景的情况下允许页面上的内容滚动

html - CSS 在 Safari 中不起作用 - 在 Chrome、Firefox 中正常

javascript - 堆叠的 div 相互调整大小

javascript - 如何在纯 JavaScript 中使用正则表达式多次匹配 XML 标签?

javascript - 在不删除关联事件的情况下从节点中删除元素?

JavaScript 可以在 IE 上运行,但不能在 Firefox 和 chrome 上运行

c# - 在 ASP.NET MVC 中单击按钮时呈现局部 View

javascript - 我在页面上使用 jquery 和常规 javascript,没有任何问题,直到我添加了另一个函数

html - 内部 h2 需要为 100% 高度