使语义UI菜单崩溃并响应

Question

我在文档上到处查找，什么都没有。我正在寻找一个类似的导航栏折叠功能，它用于自助汉堡包（我可以点击）到侧面和菜单项内部。请帮忙。语义UI看起来很好但可能很难使用

Answer 1

如果你正在计算语义，最正确的是你使用标签列表作为导航栏并使用javascript隐藏它。真的是html语义非常糟糕，代码很简单

Answer 2

这是一个非常好（和简单）的实现（信用：https://codepen.io/designosis/pen/LbMgya）

HTML

<div class="ui grid">

    <div class="computer only row">
        <div class="column">
            <div class="ui menu">
                <a class="item">Menu Item A</a>
                <a class="item">Menu Item B</a>
                <a class="item">Menu Item C</a>
                <a class="item">Menu Item D</a>
            </div>
        </div>
    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Menu Item A</a>
            <a class="item">Menu Item B</a>
            <a class="item">Menu Item C</a>
            <a class="item">Menu Item D</a>
        </div>
        <div class="pusher">
                <div id="content" class="ui segment">
                        Content here
                </div>
         </div>
</div>

CSS

#content {
  min-height: 100px;
}
.ui.grid{
  padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

JavaScript的

$('.ui.sidebar').sidebar({
  context: $('.ui.pushable.segment'),
  transition: 'overlay'
}).sidebar('attach events', '#mobile_item');