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的定位页面元素
Aug 29 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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
Thinkphp多文件上传实现方法
2014/10/31 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
个人欠款担保书
2014/05/20 职场文书
干部年终考核评语
2015/01/04 职场文书
教师师德工作总结2015
2015/07/22 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Python数据类型最全知识总结
2021/05/31 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis