语义 UI：具有响应内容的可折叠侧边栏

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 可以做到，但我认为他使用的是旧版本的 Semantic。我尝试了他的方法类但没有成功。

有什么想法吗？

Answer 1

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

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

语义 UI：具有响应内容的可折叠侧边栏

Semantic UI: Collapsable sidebar with responsive content

html

javascript

semantic-ui