时间戳

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

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

问题描述

我正在构建基于语义 UI 的 HTML + CSS 设计，并且我能够通过使用 class 使几乎任何元素都具有响应性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>

关于如何实现这一目标的任何想法？官方文档页面上没有文档。

非常感谢！

标签： htmlcssresponsive-designsemantic-ui

解决方案

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

推荐阅读