带有固定顶部菜单的语义 UI 侧边栏 [英] Semantic-UI sidebar with fixed top menu

问题描述

Semantic-UI 在其侧边栏页面上预先警告固定位置内容当出现侧边栏时，可能会出现改变其位置的问题."然后它提供了两种可能的解决方案.

令人惊讶的是，在同一个页面和整个网站上，Semantic-UI 的网站使用了一个固定的顶部菜单，当左侧边栏被触发时，它会调整得很好.

我只想创建一个固定的顶部菜单，就像 Semantic-UI 的站点使用的那样，在侧边栏打开时可以正确调整.然而，事实证明这是非常困难的，因为两个提议的解决方案都不起作用.我已经检查了标记、css 和 javascript，但无法弄清楚他是如何从 Semantic-UI 提供的代码到一个可在侧边栏打开时正确调整的工作固定顶部菜单的.

有什么想法或方向吗?使用 Semantic-UI 如何创建一个固定的顶部菜单，当侧边栏打开时可以正确调整?

解决方案

来自文档:

<块引用>

使用固定内容 任何应该随同移动的固定位置内容当您的侧边栏可见时，页面内容应该接收类名称固定并作为侧边栏的同级元素存在.

未包含在您的推送器旁边的固定内容将丢失显示侧边栏时的位置.

<div class="ui 固定倒置主菜单">

Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.

Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.

I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.

Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?

解决方案

From the docs:

Using Fixed Content Any fixed position content that should move with page content when your sidebar is visible, should receive the class name fixed and exist as a sibling element to your sidebar.

Fixed content that is not included adjacent to your pusher will lose its positioning when a sidebar is shown.

<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>

这篇关于带有固定顶部菜单的语义 UI 侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！