使用 JSF 和 PrimeFaces 创建响应式设计菜单答案

【问题标题】：Create an responsive design menu with JSF and PrimeFaces使用 JSF 和 PrimeFaces 创建响应式设计菜单
【发布时间】：2015-05-17 15:09:37
【问题描述】：

我正在尝试使用 PrimeFaces 和 JSF 创建一个菜单，例如 this 之一。

因为我不知道我将拥有多少项目，所以这个菜单必须是动态的。在运行时我会得到一个array 的StudentsGroup-Objects。每个StudentsGroup-Object 包含几个Students-Objects。它也应该是responsive design。 PrimeFaces 有可能吗？我如何做到这一点？

它应该看起来像这样

我没有找到任何解释此类内容的教程。如果有人可以发布一个很好的教程就足够了。

【问题讨论】：

类似什么？制作这样的菜单“响应式”？然后从告诉它应该如何响应开始？发布“好”教程是指完整的解决方案？
图片显示了我尝试实现的菜单类型。最好的菜单应该有一个响应式设计。不需要是一个完整的解决方案，如果有人可以链接一个可以帮助我或引导我走向正确方向的教程就足够了。
此菜单中的响应式是什么？在大屏幕上应该是水平的吗？它应该在较小的屏幕上隐藏显示按钮吗？什么？
现在它有一个固定大小，如“width:300px”。如果屏幕变小时宽度发生变化就足够了。现在我正在努力动态创建这个菜单，因为我不知道我会有多少对象
给它一个styleClass，看看css中的媒体查询能为你做什么

标签： jsf jsf-2 primefaces responsive-design

【解决方案1】：

Prime faces 的菜单项似乎没有内置的响应式功能，但是，您应该能够将 CSS 样式表应用到您的元素并设计自己的响应式布局。

如果您正在寻找教程，那么您正在寻找的是关于如何做到这一点的教程，而不是专门针对 Prime Faces 的教程。

【讨论】：

【解决方案2】：

教程：

在菜单前面添加按钮/图像/链接
使用媒体查询创建 CSS，在小屏幕上隐藏菜单并显示按钮
将 javascript 添加到单击时的按钮/图像/链接
1. 通过更改 css 显示菜单（添加类或其他）
2. 在历史记录中添加一个“#”条目，以便后退按钮关闭菜单
3. 在正文中添加一个 onclick 事件处理程序，以在外部单击时隐藏菜单（实际激活时将其删除）

【讨论】：

【解决方案3】：

看看他们提供的 Primefaces 主题

-> 有陈列柜： http://www.primefaces.org/sentinel/

-> 如果你很好，再见： http://www.primefaces.org/layouts/sentinel

【讨论】：