14Semantic-UI之菜单样式
Posted jie-fang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了14Semantic-UI之菜单样式相关的知识，希望对你有一定的参考价值。
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>以上是关于14Semantic-UI之菜单样式的主要内容，如果未能解决你的问题，请参考以下文章
在 React 中使用 Semantic-UI 固定菜单和侧边栏
使用 React 和 Semantic-Ui 更新菜单中的活动项