<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>侧边栏</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body>
<!-- 链接触发器， href 属性为目标元素 ID -->
<a href="#doc-oc-demo1" data-am-offcanvas>点击显示侧边栏</a>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo1" class="am-offcanvas">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content">
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
</div>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>
效果图：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>侧边栏</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body>
<!-- 按钮触发器， 需要指定 target -->
<button class="am-btn am-btn-primary" data-am-offcanvas="{target: '#doc-oc-demo2', effect: 'push'}">点击显示侧边栏</button>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo2" class="am-offcanvas">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content">
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
</div>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>
效果图：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>侧边栏</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body>
<!-- 按钮触发器， 需要指定 target -->
<button class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}">右侧显示边栏</button>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo3" class="am-offcanvas">
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
<div class="am-offcanvas-content">
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
</div>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>
效果图：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>侧边栏</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body>
<!-- 侧边栏内容 -->
<div id="my-offcanvas" class="am-offcanvas">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content">
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
<p><a href="##">列表1</a></p>
</div>
</div>
</div>
<div style="margin: 50px 0 0 300px;">
<button class="am-btn am-btn-primary doc-oc-js" data-rel="open">打开侧边栏</button>
<button class="am-btn am-btn-primary doc-oc-js" data-rel="close">关闭侧边栏</button>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
$(function() {
var id = '#my-offcanvas';
var $myOc = $(id);
$('.doc-oc-js').on('click', function() {
$myOc.offCanvas($(this).data('rel'));
});
$myOc.on('open.offcanvas.amui', function() {
console.log(id + ' 打开了。');
}).on('close.offcanvas.amui', function() {
console.log(id + ' 关闭了。');
});
});
</script>
</body>
</html>
效果图：
相关推荐
1. 导航：AmazeUI提供了多种导航解决方案，如顶部导航、侧边栏导航、面包屑导航等，适用于后台系统的多级菜单需求。 2. 表单：模板中可能包含了各种类型的表单元素，如输入框、下拉选择、复选框、单选按钮等，以及...
AmazeUI的模板设计简洁而实用，通常包含了一系列预设的页面布局、导航栏、侧边栏、表单、按钮、图标等元素，这些模板可以直接应用于项目中，大大节省了开发时间和成本。"AmazeUI模板简介有效，可以直接拿来使用"这句...
AmazeUI提供了多种可折叠和扩展的侧边栏样式，这个文件会展示如何实现和定制。 通过这些文件，开发者可以学习到如何利用AmazeUI的组件和布局来构建适应不同应用场景的网页。AmazeUI的易用性、灵活性和丰富的特性...
9. `sidebar.html`：侧边栏组件，常见于导航或快速访问链接，AmazeUI的侧边栏设计可以很好地适应折叠和展开操作，适合移动设备。 通过这些文件，开发者可以了解并学习如何利用AmazeUI构建高效、美观且功能丰富的...
AmazeUI是一款基于移动优先（Mobile First）理念的前端框架，专为构建响应式、跨屏、高性能的网站而设计。其导航条（Navbar）组件是AmazeUI的核心部分，用于提供网页的主要导航功能，帮助用户在不同页面间进行切换。...
在AmazeUI后台模板中，开发者可以找到多种预设的布局模式，如固定侧边栏、折叠侧边栏、顶部导航等，这些模式已经考虑到了后台系统常见的交互需求。同时，模板中的颜色主题、字体设置等也是可定制的，满足不同项目的...
例如，使用AmazeUI的表格组件来展示数据，使用模态框组件处理用户的交互操作，或者利用导航栏和侧边栏来构建后台系统的菜单结构。 为了确保最佳性能，开发者还需要关注页面的优化，如合理使用CDN加速静态资源加载，...
- **导航**：AmazeUI提供了多种导航组件，如顶部导航、侧边栏导航、面包屑导航等，满足不同场景下的导航需求。 - **表单**：预设了各种输入控件和验证功能，简化表单设计，提升用户体验。 - **按钮**：提供多种...
这在创建导航栏、侧边栏或者页脚等需要一直可见的元素时非常有用。 AmazeUI 提供了一套简洁且实用的 CSS 类来帮助开发者快速实现固定定位。固定定位是 CSS 定位模型的一部分，通过 `position: fixed` 属性实现。...
6. 导航：后台管理系统通常包含多个模块，AmazeUI的导航组件如侧边栏、面包屑导航等，帮助用户快速定位和切换页面。 7. 其他组件：如按钮、提示框、弹窗、时间轴等，都是构建后台管理系统不可或缺的部分。 通过这些...
3. **Sidebar**：侧边栏常用于放置分类、搜索框或者个人中心链接，AmazeUI的Sidebar组件可以根据屏幕尺寸实现折叠和展开。 4. **List**：用于展示文章列表，AmazeUI的List组件提供了多种列表样式，可以快速构建文章...
- **admin-index-fixed.html** 和 **admin-index.html**：这些可能是管理后台的首页模板，"fixed"可能指的是固定头部或侧边栏，用于创建稳定的导航体验。 - **widget.basic.html** 和 **widget.html**：这两个文件...
例如，AmazeUI的导航组件支持水平和垂直布局，可轻松实现侧边栏导航；表单组件则提供了各种输入类型和验证功能，方便用户数据的输入与提交。 在视觉设计上，AmazeUI遵循简洁、直观的原则，提供了一套统一的样式和...
2. **垂直导航**（Vertical Navigation）：这种导航通常用于侧边栏，适合内容丰富的网站，它可以节省横向空间，让页面内容更紧凑。AmazeUI的垂直导航也支持收缩和展开，便于在小屏幕设备上使用。 3. **下拉菜单**...
5. **导航组件**：如导航条、面包屑、侧边栏等，帮助用户在网站中轻松导航。 其次，JavaScript 组件则是 Amaze UI 动态交互的关键。这些组件包括： 1. **弹出层组件**：如模态框、提示、警告框，用于显示临时信息...
通过使用`.am-row`和`.am-col`类，我们可以灵活地调整文章内容和侧边栏的布局，使其在桌面、平板和手机等不同设备上都有良好的显示效果。例如，可以将主要内容放在大屏幕上的12列中，而在小屏幕上则自动堆叠为单列...
8. `sidebar.html`：侧边栏是很多网站和应用中常见的导航或工具区域，AmazeUI提供了多种侧边栏样式和折叠效果，适应不同设计需求。 9. `non-responsive.html`：非响应式页面可能用于展示AmazeUI在不考虑屏幕适配...
3. **布局设计**：利用Amaze UI 的栅格系统设计后台的页面布局，创建主体结构，如头部、侧边栏、主要内容区域等。 4. **组件使用**：在布局基础上，添加Amaze UI 的组件，如导航条、表格、表单、图表等，实现后台...
2. 侧边栏：可折叠的侧边栏，通常包含次级菜单和功能快捷入口。 3. 内容区：展示主要业务逻辑和数据的部分，根据需要可包含表格、卡片、表单等元素。 4. 底部：包含版权信息、链接和其他辅助内容。 四、Amaze UI...
1. **结构布局**：后台模板通常包含侧边栏、顶部导航、主要内容区域等元素，便于用户导航和操作。这个模板可能已经预设了这些布局，以适应后台管理的需求。 2. **功能模块**：后台管理往往涉及到用户管理、数据统计...