Metro UI CSS 学习笔记之组件(菜单与导航)分析

你猜 阅读:170 2021-03-31 22:44:07 评论:0

查阅Metro UI CSS 对组件(菜单与导航)描述,本人觉得已经描述的很详细,所以在这里不打算做详细的讲解,大家可以直接阅读以下源代码(是进过本人已经优化后的代码)。

温馨提示:相关注释,也已经在代码中添加。

<!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="span10"> 
                <h2>下拉菜单 Demo</h2> 
                <div class="clearfix"> 
                    <ul style="display: block; position: static; margin-bottom: 15px; margin-left: 0;" class="dropdown-menu open"> 
                        <li><a href="#">功能选项一</a></li> 
                        <li><a href="#">功能选项二</a></li> 
                        <li><a href="#">功能选项三</a></li> 
                        <li><a href="#">功能选项四</a></li> 
                        <li class="divider"></li> 
                        <li><a href="#">功能选项五</a></li> 
                    </ul> 
                </div> 
                <p> 
                    菜单的切换,显示或隐藏下拉菜单的链接,这样的互动功能需要使用Javascript插件<code>dropdown</code>配合。 
                </p> 
            </div> 
 
            <h2>导航栏Demo</h2> 
            <div class="span10"> 
                <div class="nav-bar"> 
                    <div class="nav-bar-inner"> 
                        <a href="#"><span class="element brand">项目名称</span></a> 
                        <span class="divider"></span> 
 
                        <ul class="menu"> 
                            <li data-role="dropdown"> 
                                <a>菜单名称</a> 
                                <ul class="dropdown-menu"> 
                                    <li><a href="#">子菜单名称 1</a></li> 
                                    <li><a href="#">子菜单名称 2</a></li> 
                                    <li><a href="#">子菜单名称 3</a></li> 
                                    <li class="divider"></li> 
                                    <li><a href="#">子菜单名称 4</a></li> 
                                </ul> 
                            </li> 
                            <li><a href="#">菜单名称 2</a></li> 
                            <li><a href="#">菜单名称 3</a></li> 
                            <li><a href="#">菜单名称 4</a></li> 
                        </ul> 
                    </div> 
                </div> 
 
                <p>你可以修改导航栏的颜色。你可以使用类名<code>bg-color-*</code>来设置你需要的导航栏颜色。</p> 
 
                <code> 
                    <div class="nav-bar bg-color-darken">...</div> 
                </code> 
                <div class="nav-bar bg-color-darken"> 
                    <div class="nav-bar-inner"> 
                        <a href="#"><span class="element brand">项目名称</span></a> 
                        <span class="divider"></span> 
 
                        <ul class="menu"> 
                            <li data-role="dropdown"> 
                                <a>菜单名称 1</a> 
                                <ul class="dropdown-menu"> 
                                    <li><a href="#">子菜单名称 1</a></li> 
                                    <li><a href="#">子菜单名称 2</a></li> 
                                    <li><a href="#">子菜单名称 3</a></li> 
                                    <li class="divider"></li> 
                                    <li><a href="#">子菜单名称 4</a></li> 
                                </ul> 
                            </li> 
                            <li><a href="#">菜单名称 2</a></li> 
                            <li><a href="#">菜单名称 3</a></li> 
                            <li><a href="#">菜单名称 4</a></li> 
                        </ul> 
                    </div> 
                </div> 
 
                <br> 
                <code> 
                    <div class="nav-bar bg-color-green">...</div> 
                </code> 
                <div class="nav-bar bg-color-green"> 
                    <div class="nav-bar-inner"> 
                        <a href="#"><span class="element brand">项目名称</span></a> 
                        <span class="divider"></span> 
 
                        <ul class="menu"> 
                            <li data-role="dropdown"> 
                                <a>菜单名称 1</a> 
                                <ul class="dropdown-menu"> 
                                    <li><a href="#">子菜单名称 1</a></li> 
                                    <li><a href="#">子菜单名称 2</a></li> 
                                    <li><a href="#">子菜单名称 3</a></li> 
                                    <li class="divider"></li> 
                                    <li><a href="#">子菜单名称 4</a></li> 
                                </ul> 
                            </li> 
                            <li><a href="#">菜单名称 2</a></li> 
                            <li><a href="#">菜单名称 3</a></li> 
                            <li><a href="#">菜单名称 4</a></li> 
                        </ul> 
                    </div> 
                </div> 
 
                <br> 
                <code> 
                    <div class="nav-bar bg-color-pink">...</div> 
                </code> 
                <div class="nav-bar bg-color-pink"> 
                    <div class="nav-bar-inner"> 
                        <a href="#"><span class="element brand">项目名称</span></a> 
                        <span class="divider"></span> 
 
                        <ul class="menu"> 
                            <li data-role="dropdown"> 
                                <a>菜单名称 1</a> 
                                <ul class="dropdown-menu"> 
                                    <li><a href="#">子菜单名称 1</a></li> 
                                    <li><a href="#">子菜单名称 2</a></li> 
                                    <li><a href="#">子菜单名称 3</a></li> 
                                    <li class="divider"></li> 
                                    <li><a href="#">子菜单名称 4</a></li> 
                                </ul> 
                            </li> 
                            <li><a href="#">菜单名称 2</a></li> 
                            <li><a href="#">菜单名称 3</a></li> 
                            <li><a href="#">菜单名称 4</a></li> 
                        </ul> 
                    </div> 
                </div> 
 
                <br> 
                <p> 
                    对于制作下拉菜单,你的页面<code></head></code>必须有<code>dropdown.js</code> 
                </p> 
 
 
 
 
 
 
            </div> 
    </div> 
</div> 
 
</body> 
</html>

效果展示:




声明

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

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号