AmazeUI导航的示例代码


Posted in HTML / CSS onAugust 14, 2020

本文主要介绍了AmazeUI导航的示例代码,分享给大家,也给自己留个笔记,具体如下:

<!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>
<!--基本样式-->
<ul class="am-nav">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">开始使用</a></li>
 <li><a href="#">按需定制</a></li>
</ul>
<!--水平导航-->
<ul class="am-nav am-nav-pills">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">开始使用</a></li>
 <li><a href="#">按需定制</a></li>
</ul>
<!--标签式导航-->
<ul class="am-nav am-nav-tabs">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">开始使用</a></li>
 <li><a href="#">按需定制</a></li>
</ul>
<!--宽度自适应-->
<ul class="am-nav am-nav-pills am-nav-justify">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">开始使用</a></li>
 <li><a href="#">按需定制</a></li>
 <li><a href="#">加入我们</a></li>
</ul>
<ul class="am-nav am-nav-tabs am-nav-justify">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">开始使用</a></li>
 <li><a href="#">加入我们</a></li>
</ul>
<!--导航状态-->
<ul class="am-nav am-nav-pills">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li class="am-disabled"><a href="#">禁用链接</a></li>
</ul>
<!--导航标题及分隔线-->
<ul class="am-nav">
 <li><a href="#">首页</a></li>
 <li class="am-nav-header">开始使用</li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">联系我们</a></li>
 <li class="am-nav-divider"></li>
 <li><a href="#">响应式</a></li>
 <li><a href="#">移动优先</a></li>
</ul>
<!--下拉菜单-->
<ul class="am-nav am-nav-pills">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">项目</a></li>
 <li class="am-dropdown" data-am-dropdown>
  <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
   菜单 <span class="am-icon-caret-down"></span>
  </a>
  <ul class="am-dropdown-content">
   <li class="am-dropdown-header">Header</li>
   <li><a href="#">1. 一行代码,简单快捷</a></li>
   <li class="am-active"><a href="#">2. 网址不变且唯一</a></li>
   <li><a href="#">3. 内容实时同步更新</a></li>
   <li class="am-disabled"><a href="#">4. 云端跨平台适配</a></li>
   <li class="am-divider"></li>
   <li><a href="#">5. 专属的一键拨叫</a></li>
  </ul>
 </li>
</ul>
<ul class="am-nav am-nav-tabs">
 <li class="am-active"><a href="#">首页</a></li>
 <li><a href="#">项目</a></li>
 <li class="am-dropdown" data-am-dropdown>
  <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
   菜单 <span class="am-icon-caret-down"></span>
  </a>
  <ul class="am-dropdown-content">
   ...
  </ul>
 </li>
</ul>
<!--[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>

效果图:

AmazeUI导航的示例代码

到此这篇关于AmazeUI导航的示例代码的文章就介绍到这了,更多相关AmazeUI 导航内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 #HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 #HTML / CSS
AmazeUI 图标的示例代码
Aug 13 #HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 #HTML / CSS
AmazeUI 网格的实现示例
Aug 13 #HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 #HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
javascript History对象原理解析
2020/02/17 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
如何验证python安装成功
2020/07/06 Python
ASP.NET Core中的配置详解
2021/02/05 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
教学大赛获奖感言
2014/01/15 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
运动会加油稿30字
2015/07/21 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android