Semantic 导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../../public/semantic/dist/semantic.min.css">
</head>
<div class="ui attached stackable menu">
<div class="ui container">
<a class="item">
<i class="home icon"></i>Home
</a>
<a class="item">
<i class="grid layout icon"></i>Browser
</a>
<a class="item">
<i class="mail icon"></i>Messages
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i>Edit Profile</a>
<a class="item"><i class="globe icon"></i>Choose Language</a>
<a class="item"><i class="setting icon"></i>Account</a>
</div>
</div>
<div class="right item">
<div class="ui input">
<input placeholder="Serch..." type="text"></input>
</div>
</div>
</div>
</div>
<script src="../../../public/common/js/jquery.min.js"></script>
<script src="../../../public/semantic/dist/semantic.min.js"></script>
</body>
</html>
效果如下：
