Metro UI CSS 学习笔记之组件(侧边栏)

最新推荐文章于 2023-06-29 11:53:11 发布

在奋斗的大道

最新推荐文章于 2023-06-29 11:53:11 发布

阅读量1.3k

点赞数

分类专栏： Metro UI CSS 学习笔记 Metro UI CSS教程

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/43058965

版权

Metro UI CSS 学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Metro UI CSS教程

11 篇文章 5 订阅

订阅专栏

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>