Metro UI CSS 学习笔记之组件(菜单与导航)
2015-01-23 17:46
549 查看
查阅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>效果展示:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Metro UI CSS 学习笔记之Tiles组件
- Metro UI CSS 学习笔记之组件(侧边栏)
- Metro UI CSS 学习笔记之 基础组件
- Metro UI CSS 学习笔记之组件（进度条、按钮组和评分）
- Metro UI CSS 学习笔记之组件(幻灯片)
- Metro UI CSS学习笔记之组件(列表视图)
- Metro UI CSS 学习笔记之组件(对话框)
- Metro UI CSS 学习笔记之组件(多页控件和手风琴)
- html和css实现一级菜单和二级菜单学习笔记
- bootstrap菜单、按钮及导航学习笔记5-1
- 18. JAVA 图形界面 Part 2（JTextComponent、事件处理、单选按钮、复选框、列表框、下拉列表框、菜单组件、文件选择） ----- 学习笔记
- bootstrap菜单、按钮及导航学习笔记5-15导航（基础样式）
- 【css技术指南笔记】第六章 导航菜单
- HTML,CSS,JavaScript学习笔记--导航
- 安卓开发笔记——TabHost组件(二)（实现底部菜单导航）
- Orchard学习笔记二：Orchard导航和菜单设置
- DIV+CSS导航学习笔记
- Metro UI CSS 学习笔记之一：简介和Metro UI CSS 环境搭建
- bootstrap菜单、按钮及导航学习笔记5-2
- 我的学习笔记004--javascript实现旋转导航菜单