Metro UI CSS 学习笔记之组件(菜单与导航)
你猜
阅读：612
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.作者投稿可能会经我们编辑修改或补充。
