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。另外，我不认为比较我的代码会对你的情况有所帮助。我写这个答案只是为了说，我认为你只能用语义类来实现这个目标。

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

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

1 个答案: