14.1 基礎菜單樣式
在Semantic-UI中使用class="ui menu"。
示例：定義基礎菜單樣式
<div class="ui menu">
<div class="item">
<a href="">首頁</a>
</div>
<div class="item">
<a href="">今日熱點</a>
</div>
<div class="item">
<a href="">免責申明</a>
</div>
</div>
示例：定義右移動導航
<div class="ui container">
<div class="ui menu">
<div class="item">
<a href="">首頁</a>
</div>
<div class="item">
<a href="">今日熱點</a>
</div>
<div class="item">
<a href="">免責申明</a>
</div>
<div class="right item">
<a href="">注冊</a>
</div>
<div class="item">
<a href="">登陸</a>
</div>
</div>
</div>
示例：在菜單中加入輸入框
<div class="ui container">
<div class="ui menu">
<div class="item">
<a href="">首頁</a>
</div>
<div class="item">
<a href="">今日熱點</a>
</div>
<div class="item">
<a href="">免責申明</a>
</div>
<div class="right menu">
<div class="ui transparent icon input">
<input type="text" placeholder="搜索...">
<i class="search link icon"></i>
</div>
</div>
<div class="right item">
<a href="">注冊</a>
</div>
<div class="item">
<a href="">登陸</a>
</div>
</div>
</div>
14.2 垂直菜單樣式
在網頁中，一般后台界面使用垂直菜單比較多，但是這種菜單的定義比較簡單。
示例：定義垂直菜單
<div class="ui container">
<div class="ui vertical menu">
<div class="item">
<a href="">新建</a>
</div>
<div class="item">
<a href="">編輯</a>
</div>
<div class="item">
<a href="">修改</a>
</div>
<div class="item">
<a href="">刪除</a>
</div>
</div>
</div>
示例：在菜單前面加上圖標樣式，同時為圖標設置顏色
<div class="ui container">
<div class="ui vertical menu">
<div class="item">
<a href="">
<i class="file green icon"></i>
新建
</a>
</div>
<div class="item">
<a href="">
<i class="edit blue icon"></i>
編輯
</a>
</div>
<div class="item">
<a href="">
<i class="trash alternate red icon"></i>
刪除
</a>
</div>
</div>
</div>
14.3 下拉菜單樣式
在Semantic-UI中定義下拉菜單的樣式比較多，比如在div中定義，select中定義等。
示例：定義基礎下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN導入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".dropdown").dropdown();
})
</script>
</head>
<body>
<div class="ui container">
<div class="ui dropdown">
<div class="text">課程</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">JavaWeb開發</div>
<div class="item">Web前端開發</div>
<div class="item">JavaSE開發</div>
</div>
</div>
</div>
</body>
</html>
示例：使用select來定義下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN導入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.dropdown").dropdown();
})
</script>
</head>
<body>
<div class="ui container">
<select name="" id="" class="ui dropdown">
<option value="">性別</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</body>
</html>
14.4 定義二級菜單樣式
在網頁頭部一本都會采用二級菜單的操作，用多級菜單按鈕供用戶使用。
示例：定義二級菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN導入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.dropdown").dropdown();
})
</script>
</head>
<body style="padding: 20px;">
<div class="ui container">
<div class="ui menu">
<div class="item">
<i class="home icon"></i>
<a href="">首頁</a>
</div>
<div class="item">
<div class="ui dropdown">
<i class="book icon"></i>
<div class="text">課程</div>
<i class="dropdown icon"></i>
<div class="menu">
<a href="" class="item">JavaWeb課程</a>
<a href="" class="item">JAVASE課程</a>
<a href="" class="item">Struts2.x課程</a>
</div>
</div>
</div>
<div class="item">
<i class="paperclip icon"></i>
<a href="">關於</a>
</div>
</div>
</div>
</body>
</html>