`

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>

效果图：

 

 

 

 

  • 大小: 22.5 KB
分享到：
| AmazeUI 输入框组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 导航条

    NULL 博文链接：https://onestopweb.iteye.com/blog/2276958

    AmazeUI 导航条的实现示例

    本文主要介绍了AmazeUI 导航条的实现示例，分享给大家，具体如下： &lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta ...

    AmazeUI导航的示例代码

    本文主要介绍了AmazeUI导航的示例代码，分享给大家，也给自己留个笔记，具体如下： &lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta ...

    AmazeUI 流动侦测导航

    NULL 博文链接：https://onestopweb.iteye.com/blog/2277589

    AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码

    这个组件在手机端的页面中，同样可以借助AmazeUI这个前端框架实现。与此同时，可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种，一旦点击就大幅度下拉的导航了，反正我个人觉得很蛋疼...

    AmazeUI底部导航栏与分享按钮的示例代码

    AmazeUI也不例外。还提供了分享到站外的分享按钮，组件，完全不用自己写。直接提供国内主流网站的分享，没有那些传说中的facebook之流，完全不用自己改，其效果如下： 其代码如下： &lt;!--使用HTML5开发--&gt; &...

    AmazeUI 面包屑导航

    NULL 博文链接：https://onestopweb.iteye.com/blog/2276868

    AmazeUI中各种的导航式菜单与解决方法

    与Bootstrap一样，AmazeUI提供的导航式菜单也是喜欢蜷缩在右上角的一个按钮里面，然后一点击就向下拉开一大段距离。这样很不友好。此前《【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas》（点击打开...

    smartwiki-for-amazeui:smartwiki 的 amazeui 风格

    您可以根据您的需要修改conf.php 中的$filesetting数组，该数组将为程序提供导航信息 $filesetting=array ("index"=&gt;"首页"); 其中的 index 为 md 文件的文件名。您必须编写一个index.md 文件作为网站的首页。 您...

    qianMobileTest:amazeUI mobilebone seajs iscroll 车把 zepto mobilemodule

    #qianMobileTest mobileWeb测试 ##在线地址 ##测试项 做spa页面，并结合做了路由表 ...用css3写了侧栏导航功能 工程化发布 ##经验和思考 做为mobileWeb并不适合用app的hander和tab底部，太占屏幕了（如果把网页添

    jQuery响应式全屏背景图片导航菜单特效.zip

    文件包括：jQuery响应式全屏背景图片导航菜单特效、amazeui双语言全年日历、jquery仿腾讯云下拉导航、jQuery蓝色商品分页样式代码、jQuery相册图片掀开切换代码、常用web调色板合集、简单实用可展开隐藏导航菜单按钮...

    teachManager:早期个人项目（很烂的项目），开启重构及更新为springboot项目

    决定继续使用amazeUI作为前端前台框架（非常喜欢这个妹子开源框架，作为一个大老爷们，感觉自己也是个小公举啦） 采用layui作为前端后台框架（这个前端框架真心好用） 决定使用amazeUI的最新版本（2.7.2），翻新重做...

    有天轻博客 1.4.zip

    基于amaze UI设计，完美支持移动设备2.首页可设置推荐文章（可随机显示）3.支持文章/用户赞功能4.无刷新赞、签到5.幻灯片设置（须在source/nav.asp中自行更换图片地址）6.用户可二次编辑/删除自己发布的文章7.文章...

    yuncms：YunCMS是基于ThinkPHP5框架的一套CMS系统，方便用户快速建立企业网站，门户网站，个人博客或其他系统的内容管理系统

    基于Amazeui的前端框架开发（规范视图页面结构） 分布式架构（提高系统的稳定和负载力） 集成搜索引擎（适用于门户网站建设） 自定义内容结构（灵活的建立各种展示类网站） 缓存处理（适当的提高用户的访问速度和...

    有天轻博客最新官方版

    1.基于amaze UI设计，完美支持移动设备 2.首页可设置推荐文章（可随机显示） 3.支持文章/用户赞功能 4.无刷新赞、签到 5.幻灯片设置（须在source/nav.asp中自行更换图片地址） 6.用户可二次编辑/删除自己发布的文章 ...

Magicbox
Global site tag (gtag.js) - Google Analytics