semantic-ui 顶栏下方的侧边栏

Question

我有一个“.ui.inverted.menu”顶栏。现在我想在顶部栏下方添加一个 "ui.sidebar.inverted.vertical.menu"。

但是我不知道怎么弄，侧边栏总是推开topbar，不会出现在topbar下面。

有什么想法吗？

谢谢！

ps。抱歉语法不好。

Answer 1

您需要使用自定义上下文初始化边栏。

而不是做这样的事情： $('.ui.sidebar').sidebar();

您需要将侧边栏指向您想要附加到的元素，否则它将附加到您的主 <body> 标签并推开其下方的所有内容。在这种情况下，上下文应该是与 .ui.inverted.menu.

处于同一层次结构中的 <div> 元素

如果您的 HTML 看起来像：

<div class="ui inverted menu">
    <a class="item">Open Sidebar</a>
</div>
<div class="otherstuff">
    <div class="ui sidebar">
    </div>
</div>

您的初始化代码应如下所示：

$('.ui.sidebar')
  .sidebar({
    context: $('.otherstuff')
  })

这是一个非常快速的演示（您可能需要根据自己的内容调整一些 CSS 样式）http://jsfiddle.net/8po0b10v/

semantic-ui sidebar below topbar