菜单也是一个网站中必不可少的一项。
下拉菜单 <div> <div>更多</div> <i></i> <div> <div><i></i>编辑</div> <div><i></i>删除</div> <div><i></i> <i></i> 分享到 <div> <div><i></i>Medium</div> <div><i></i>微博</div> <div><i></i>微信</div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { // 点击按钮弹出下拉框 $(\'.ui.dropdown\').dropdown(); //默认是点击，可以在dropdown()里面添加一个对象：{on: \'hover\'}来行为方式。 }) </script>这是一个简单的与文章相关的下拉菜单，Semantic UI还为我们提供了不少的图标，还可以自定义图标颜色。
水平菜单 二级菜单下面是我结合条目仿照简书上某个主题下面显示的样式：
<div> <div> <a> 主页 </a> <a> 信息 </a> <a> 朋友 </a> </div> <div> <div> <div> <img src=""> </div> <div> <a>说说 Vue.js 组件的高级特性</a> <div> <p>1 递归为组件设置 name 属性，这个组件就可以在自身的模板内递归调用自己。 可以利用组件的可递归特性，来实现一些具有不确定层级的组件，比如级联选择器和树型组件。 </p> </div> <div> dreamsline </div> </div> </div> <div> <div> <img src=""> </div> <div> <a>排序优化</a> <div> <p>一、如何选择化的排序算法为什选择快速排序？ 线性排序时间复杂度很低但使用场景特殊，如果要写一个通用排序函数，不能选择线性排序。 </p> </div> <div> dreamsline </div> </div> </div> <div></div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(\'.ui.menu .item\').click(function() { $(this).siblings().removeClass(\'active\'); $(this).addClass(\'active\'); }); }); </script>这里我用自己的想法写了一段jquery代码，是切换水平菜单选项卡的逻辑。我看了文档，没找到怎么用它规定的格式写。下面是效果图：
二级菜单一共有secondary，pointing，secondary pointing，tabular，text等这几种。 分页菜单 <div> <a> <i></i> </a> <a> 1 </a> <a> 2 </a> <a> 3 </a> <div> ... </div> <a> <i></i> </a> </div> 反色菜单
在Semantic UI库里面有反色这一颜色设定。下面是我模仿node.js官网做的一个反色菜单示例：
<div> <div> <div> <a> <img src=""> </a> <div> <form action="/search"> <div> <input type="text" placeholder="搜索..."> <i></i> </div> </form> </div> </div> <div> <a> 首页 </a> <a> 新手入门 </a> <a> 关于 </a> <a> 注册 </a> <a> 登录 </a> </div> </div> </div>当然光有这些还是不够的，还须添加一些css:
.ui.input>input { padding: .3em 1em !important; } #brand-image { width: 120px; margin-top: -10px; } .brand:hover { background: none !important; }/*取消brand的背景颜色*/ #brand-image,.brand是我添加上去的id,和类名。效果图如下：
stackable是Semantic UI设置的响应方式里面的一个属性：可堆叠，元素在移动端会自动占一行宽度。这里的container容器可以使网站的内容集中在中间区域显示。
如果想让它固定在顶部的话，可以根div里把stackable换成fixed。borderless表示无边框。 给菜单加上消息吧
在menu下面的item里面添加消息
<a> 未读消息 <div>2</div> </a>