语义 UI：使垂直菜单（侧边栏）在平板电脑和移动设备视图中折叠答案

【问题标题】：Semantic UI: Make vertical menu (sidebar) collapse in tablet and mobile view语义 UI：使垂直菜单（侧边栏）在平板电脑和移动设备视图中折叠
【发布时间】：2019-03-01 03:43:47
【问题描述】：

我正在构建一个基于语义 UI 的 HTML + CSS 设计，并且我能够通过使用 stackable 类使几乎任何元素都具有响应性。

但是，我用作可见侧边栏的左侧垂直菜单在平板电脑和移动设备视图中不会折叠。

我需要的结果与 Semantic UI Docs 页面完全一样：侧边栏在桌面和横向平板电脑中可见，在纵向平板电脑和移动设备中隐藏但可切换。

这是我的代码：

<div class="ui left vertical menu collapsible main sidebar visible desktop only">
    <div class="transparent-bg">
        <div class="ui center aligned basic sideheader segment">
            <h2 class="ui header">Dashboard</h2>
        </div>
        <a class="bold item">
            <i class="building outline icon"></i>Add Item
        </a>
        <a class="active item">
          Item 1
        </a>
        <a class="item">
          Item 2
        </a>
        <a class="item">
          Item 3
        </a>
    </div>
</div>

知道如何实现这一目标吗？官方文档页面上没有文档。

非常感谢！

【问题讨论】：

我不知道语义 UI，但是在普通的 HTML/JS/CSS 中有很多方法可以做到这一点
@RedwolfPrograms 太好了，谢谢！由于我对网页设计非常陌生，请您指出正确的方向吗？
侧边栏在桌面上是可见的，但在移动设备上用一个按钮代替？
是的，在移动设备上它会被一个可以切换它的图标按钮替换。
这是一个开始：jsfiddle.net/2zb8g3yp ...它没有完全发挥作用

标签： html css responsive-design semantic-ui

【解决方案1】：

我不使用语义用户界面，但你检查过https://semantic-ui.com/modules/sidebar.html 吗？

【讨论】：