语义UI:在平板电脑和移动设备视图中折叠垂直菜单(边栏)

时间:2018-09-25 13:32:04

标签: html css responsive-design semantic-ui

我正在基于语义UI构建HTML + CSS设计,并且通过使用类stackable,我能够做出几乎任何响应的元素。

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

我需要的结果与“语义UI文档”页面完全相同:侧边栏在台式机和横向平板电脑中可见,而在纵向平板电脑和移动设备中是隐藏的,但可以切换。

这是我的代码:

<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>

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

非常感谢!

1 个答案:

答案 0 :(得分:0)

我不使用语义UI,但是您检查了https://semantic-ui.com/modules/sidebar.html吗?