带有固定顶部菜单的语义 UI 侧边栏答案

【问题标题】：Semantic-UI sidebar with fixed top menu带有固定顶部菜单的语义 UI 侧边栏
【发布时间】：2014-07-11 10:39:41
【问题描述】：

Semantic-UI 在其 sidebar page 上预先警告“固定位置的内容在出现侧边栏时可能无法更改其位置。”然后它为问题提供了两种可能的解决方案。

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

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

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

【问题讨论】：

标签： javascript user-interface semantic-ui

【解决方案1】：

使用“独占”设置显示多个相互配合的侧边栏。

$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');

【讨论】：

【解决方案2】：

来自文档：

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

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

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

【讨论】：

正确答案但需要更详细的解释：重要的是菜单（固定元素）应该是侧边栏<Sidebar/><Menu fixed/><Sidebar.Pusher/>的直接兄弟

【解决方案3】：

<!-- 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文件。

【讨论】：