Metro UI CSS 学习笔记之组件(侧边栏)
无情
阅读:621
2021-03-31 22:44:01
评论:0
Metro UI CSS Demo案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--metro UI css 样式文件(组件基础)-->
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<!--metro UI css 样式文件(组件基础)-->
<link href="css/modern.css" rel="stylesheet">
<link href="css/modern-responsive.css" rel="stylesheet">
<!--加载jquery js 文件-->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<!--加载metro js 文件-->
<script src="js/metro/metro.min.js"></script>
<!--加载第三方js 文件-->
<script src="js/modern/dropdown.js"></script><!--下拉菜单第三方控件-->
<title>Modern UI CSS 学习笔记</title>
</head>
<body class="modern-ui" style="background: #f1f1f1">
<div class="page">
<div class="page-header">
<div class="page-header-content">
<h3>Metro UI CSS样式文件之组件(侧边栏)</h3>
</div>
</div>
<div class="page-region">
<div class="page-region-content">
<div class="page-sidebar">
<ul>
<li data-role="dropdown" class="sticker sticker-color-pink dropdown active">
<a>项目</a>
<ul class="sub-menu light sidebar-dropdown-menu open">
<li><a href="">当前</a></li>
<li><a href="">关闭</a></li>
</ul>
</li>
<li data-role="dropdown" class="sticker sticker-color-pink dropdown active">
<a>笔记</a>
<ul class="sub-menu light sidebar-dropdown-menu open">
<li><a href="">重要</a></li>
<li><a href="">今天</a></li>
<li><a href="">一周</a></li>
<li><a href="">一个月</a></li>
</ul>
</li>
<li class="sticker sticker-color-orange"><a href="#"><i class="icon-cart"></i> 购物</a></li>
<li class="sticker sticker-color-orangeDark"><a href="#"><i class="icon-clipboard"></i> 食谱</a></li>
<li class="sticker sticker-color-green"><a href="#"><i class="icon-history"></i> 爱好</a></li>
<li data-role="dropdown" class="sticker sticker-color-pink dropdown active">
<a><i class="icon-list"></i> 要做的</a>
<ul class="sub-menu light sidebar-dropdown-menu open">
<li><a href="">今天</a></li>
<li><a href="">工作清单</a></li>
<li><a href="">下班后要做的</a></li>
<li><a href="">观看电影</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果展示:
侧边栏
使用<ul />
定义侧边栏。
- <div class="page-sidebar">
- <ul>
- <li><a>Item</a></li>
- ...
- <li><a>Item</a></li>
- </ul>
- </div>
图标
使用icon-*
类名给菜单添加图标。
- <div class="page-sidebar">
- <ul>
- <li><a><i class="icon-cube"></i>Item</a></li>
- ...
- </ul>
- </div>
彩色贴纸
你可以给侧边栏的菜单项创建彩色贴纸。要创建彩色贴纸,只需要给菜单项添加类名sticker
。
- <div class="page-sidebar">
- <ul>
- <li class="sticker"><a>Item</a></li>
- ...
- </ul>
- </div>
使用前缀sticker-
的类名给彩色贴纸设置颜色。例如: sticker-color-blue
- <div class="page-sidebar">
- <ul>
- <li class="sticker sticker-color-blue"><a>Item</a></li>
- ...
- </ul>
- </div>
二级菜单
你可以在侧边栏创建二级菜单。
- <div class="page-sidebar">
- <ul>
- <li>
- <a>菜单名称</a>
- <ul class="sub-menu">
- ...
- </ul>
- </li>
- ...
- </ul>
- </div>
二级下拉菜单
你也可以使用dropdown创建二菜下拉菜单。
- <div class="page-sidebar">
- <ul>
- <li data-role="dropdown">
- <a>菜单标题</a>
- <ul class="sub-menu sidebar-dropdown-menu">
- ...
- </ul>
- </li>
- ...
- </ul>
- </div>
使用下拉菜单需要在你的页面头部添加dropdown.js
。
高亮显示二级菜单
你要高亮显示二菜单,需要添加类名light
.
- <div class="page-sidebar">
- <ul>
- <li>
- <a>Item</a>
- <ul class="sub-menu light">
- ...
- </ul>
- </li>
- ...
- </ul>
- </div>
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。