在 Semantic UI 里，设计好了一些菜单的样式 .. 先给菜单添加一个包装 .. 可以使用一个 div 标签 . 在上面要加上 ui .. 还有 menu 这两个类 ..

div.ui.menu

在它里面，可以放一些菜单的项目，Semantic UI 不太在乎你为菜单项使用什么样的标签 .. 你只需要在菜单项上添加一个 item 类就行了 .. 比如这里我用一个 a 标签 .. 上面加上 item .. 需要三个这样的项目 ..

设置一下菜单项上的文字 .. 课程 .. 博客 .. 社区 ..

a.item*3

现在你看到的就是默认的菜单的样式 .. 在激活的菜单项上需要添加一个 active .. 比如我们在 博客 这个菜单项上添加一个 active .. 保存 ... 你会看到，使用了 active 的菜单项会跟其它的菜单项的样式不一样 .. 默认它会有一个灰色的背景 ..

在这个菜单栏上我们可以再添加点东西 .. 比如一个标题 .. 用一个 div 标签 .. 上面加上 header ... 另外还有 item .. ninghao.net ..

再添加一个文本框 .. 先给它添加一个包装 .. 一个 div 标签，上面加上 item .. 它里面放一个带图标的文本框 . div.ui.icon.input .. 然后是一个文本框 .. input[placeholder=搜索...] ... 另起一行 .. 再添加一个小图标 .. i.search.icon ..

再添加一个按钮 .. 这个按钮可以放在菜单栏的右边 .. 先输入一个 div .. 上面加上 right .. 还有 item ... 表示这是一个在右边显示的项目 .. 在这个项目里添加一个按钮 .. button.ui.primary.button .. 注册 ..

如果你想让这个菜单在小尺寸的设备上堆叠在一起显示 ... 在这个菜单栏的包装上.. 添加一个 stackable .. 保存 ..

缩小一下页面的宽度 .. 到一定程度的时候 .. 菜单项会堆叠在一起 .. 更适合在小尺寸的设备上显示 ..