javascript - 语义用户界面 : Collapsable sidebar with responsive content

Question

我正在尝试创建一个带有可切换侧边栏的管理模板。我希望它只是滑入和滑出，并相应地调整内容的大小。我已经尝试了所有我能想到的方法，但没有任何效果。

这是我正在做的一个示例:

    <div class="ui vertical sidebar menu visible pushable">
    <a class="item">
        Item 1
    </a>

    <a class="item">
        Item 2
    </a>

    <a class="item">
        Item 3
    </a>
</div>

<div class="ui pusher">
    <div class="four column stackable ui grid">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>
</div>

我试过使用它，它几乎可以工作，但显示搞砸了。

$('.ui.sidebar').sidebar({
    // Overlay will mean the sidebar sits on top of your content
    transition: 'overlay'
});

$('.ui.sidebar').sidebar('toggle');

看起来像this guy能够做到，但我认为他使用的是旧版本的语义。我尝试了他的相同类(class)，但没有成功。

有什么想法吗？

Answer 1

是的，我使用旧版本here ，但我认为它在新版本中是一样的。为了制作响应式内容，我编写了自定义 CSS 和 JS。另外，我认为比较我的代码对您的情况没有帮助。我写这个答案只是想说，我认为你不能只用语义类来实现这一点。

我认为您必须在切换侧边栏时触发窗口调整大小。