【问题标题】:Switching a side menu to off-canvas/top-menu with Foundation使用 Foundation 将侧边菜单切换到画布外/顶部菜单
【发布时间】:2024-01-21 04:56:01
【问题描述】:

我正在尝试使用 Foundation 5 实现像 this 这样的结果。

我希望顶部栏和侧边菜单的行为与该模板中的完全一样。带有图标和文本的侧边菜单。

我可以对文本使用“show-for-large-up”类,所以它隐藏在介质中,只留下图标。但问题是侧边菜单会在小屏幕上切换到画布菜单并成为顶部菜单的一部分。我发现这很难实现。

【问题讨论】:

  • 我澄清了问题的主体并重写了标题以解释您要做什么。顺便说一句,我怀疑基础标签是错误的,应该是 zurb-foundation;请仔细检查。
  • 感谢内森。不知道你在说哪个标签。
  • 嘿内森,你确定那是画布外菜单吗?因为链接只是一个普通的左侧菜单。检查这个zurb.com/patterntap,即使他们使用了正常的左侧菜单。

标签: jquery html css menu zurb-foundation


【解决方案1】:

您可以将内容复制到侧边菜单和顶部栏上,并在侧边菜单上设置 show-for-large-up 并在顶部菜单上设置 hide-for-large-up。

另一种选择是使用 JavaScript / jQuery 将元素从侧边栏动态附加到顶部栏

【讨论】:

  • 谢谢,我不想复制菜单的代码。让我试试jquery append,然后我会在这里发布代码。
  • 我无法将左侧菜单转换为顶部菜单,唯一的方法是使用重复的内容。你也知道如何在鼠标悬停在左侧菜单上获得这种效果zurb.com/patterntap 它叫什么?
  • 其实没关系,我使用了 jquery mouseenter 和 mouseleave 并得到了那个效果。
  • 酷,我正要发布答案
  • 嗨,Tomer,如果它有不同的方法,请添加。学习新东西总是好的。