带有固定顶部菜单的语义ui侧边栏

Question

Semantic-UI在其侧边栏页面上预先警告"当侧边栏出现时，固定位置的内容可能无法改变其位置。"然后给出了两种可能的解决方案。

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

我想简单地创建一个固定的顶部菜单，就像Semantic-UI的网站使用的那样，当侧边栏打开时，它会适当地调整。然而，这被证明是令人沮丧的困难，因为两种提出的解决方案都不起作用。我已经检查了标记、css和javascript，但无法弄清楚他是如何从代码语义ui提供到一个工作的固定顶部菜单，当侧边栏打开时，它会正确调整。

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

Answer 1

From the docs:

使用固定内容任何应该移动的固定位置的内容当侧边栏显示页面内容时，应该接收该类名称固定，并作为侧边栏的兄弟元素存在。

修复推送器附近不包含的内容将丢失的问题显示侧边栏时的位置

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

Answer 2

<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
    <a class="item">Home    </a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
    <a class="item menu-trigger">Menu</a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>
<div class="pusher">
    <!-- Page Content Here-->
    <div class="ui basic segment">
        <h3 class="ui header">Hello there</h3>  
    </div>
</div>

不要忘记把上面的代码放在"body"标签里面，并包括css &js文件。

Answer 3

使用'exclusive'设置显示多个可以很好地相互配合的边栏。

$ (' .your-shared-sidebar-class ') .sidebar("设置","独家",假).sidebar("秀");