使用JSF和PrimeFaces创建响应性设计菜单

我正在尝试创建一个带有PrimeFaces和类似JSF的菜单

因为我不知道我会有多少个项目，这个菜单必须是动态的。在运行时，我将获得

学生组对象的
数组
。每个
StudentsGroup对象
都包含几个
Students对象
。它也应该是一种响应性设计
。这对素面有可能吗？我如何做到这一点

应该是这样的

我没有找到任何教程来解释这样的事情。如果有人能发布一个goot教程就足够了。
Prime faces似乎没有内置的菜单项响应功能，但是，您应该能够将CSS样式表应用于元素，并设计自己的响应布局

如果您正在查找教程，那么查找有关如何执行此操作的教程，特别是，是您正在查找的，而不是特定于基本面的教程。
教程：

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

看看他们提供的Primefaces主题

->展览包括：

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