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');

Answer 3

这是我使用语义UI响应中可用的响应组件制作的可折叠NavMenu组件：

lxml

我要使用传统外观的导航栏，该导航栏的左侧为链接，右侧为“注销”按钮。尽管iPad的像素宽度（如Chrome开发者工具所示）为768px，但由于某种原因，断点对我而言为790px（请问是否有人可以告诉我这是为什么）。因此，“笔记本电脑项目”的最小宽度为790，而“移动/平板电脑项目”的maxWidth为789。

我在Semantic-UI文档中找不到响应组件。它在语义UI反应的“附加组件”下列出。

如果您不使用React，另一种方法是为移动用户实现侧边栏。

使语义UI菜单折叠并响应

3 个答案: