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 />定义侧边栏。

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li><a>Item</a></li>
    4. ...
    5. <li><a>Item</a></li>
    6. </ul>
    7. </div>

图标

使用icon-*类名给菜单添加图标。

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li><a><i class="icon-cube"></i>Item</a></li>
    4. ...
    5. </ul>
    6. </div>

彩色贴纸

你可以给侧边栏的菜单项创建彩色贴纸。要创建彩色贴纸,只需要给菜单项添加类名sticker

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li class="sticker"><a>Item</a></li>
    4. ...
    5. </ul>
    6. </div>

使用前缀sticker-的类名给彩色贴纸设置颜色。例如: sticker-color-blue

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li class="sticker sticker-color-blue"><a>Item</a></li>
    4. ...
    5. </ul>
    6. </div>

二级菜单

你可以在侧边栏创建二级菜单。

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li>
    4. <a>菜单名称</a>
    5. <ul class="sub-menu">
    6. ...
    7. </ul>
    8. </li>
    9. ...
    10. </ul>
    11. </div>

二级下拉菜单

你也可以使用dropdown创建二菜下拉菜单。

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li data-role="dropdown">
    4. <a>菜单标题</a>
    5. <ul class="sub-menu sidebar-dropdown-menu">
    6. ...
    7. </ul>
    8. </li>
    9. ...
    10. </ul>
    11. </div>

使用下拉菜单需要在你的页面头部添加dropdown.js

高亮显示二级菜单

你要高亮显示二菜单,需要添加类名light.

 
 
 
  
    1. <div class="page-sidebar">
    2. <ul>
    3. <li>
    4. <a>Item</a>
    5. <ul class="sub-menu light">
    6. ...
    7. </ul>
    8. </li>
    9. ...
    10. </ul>

    1. </div>

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号