您现在的位置是：网站首页> 编程资料编程资料
AmazeUI 导航条的实现示例AmazeUI底部导航栏与分享按钮的示例代码AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代
2021-08-30
1329人已围观
简介 这篇文章主要介绍了AmazeUI 导航条的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
拥有易用的导航条对于任何网站都很重要。本文主要介绍了AmazeUI 导航条的实现示例，分享给大家，具体如下：
效果图：
AmazeUI各种的导航式菜单与解决方法
一、改造AmazeUI提供的手机端文字横排菜单
AmazeUI提供的手机端文字横排菜单的背景颜色是白色的，字体是蓝色的，没有提供相应的class去改写里面的字体，
我们可以为背景与文字添加一个css，改写其背景与文字颜色
效果如下：
代码如下：
导航菜单-横排文字式
二、利用按钮组与下拉按钮
这里运用了解决Bootstrap导航栏的思想，《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》（点击打开链接），但是AmazeUI的按钮组与下拉按钮的复合相当不给力。没有提供下拉按钮与按钮复合的按钮组。同时，其栅格化布局也无法约束其下拉按钮的大小，因此，必须自己整几个div，调节其width与margin属性，规范其大小。
效果如下：
代码如下：
这里，每一行最好放置3个组件就好，设置css为text-align:center，还要补上一个margin-left:-1.5%才刚好其居中，width:100%占据一行。
其下的各个div占据30%的宽度。接着的各个按钮、下拉按钮其宽度必须是110%，这样才能刚刚配合好原来的样式，把按钮与下拉按钮符合起来。
其中，里面的li意为分割线。
三、利用无下拉项目的标签页
其实手机里面的导航真的无须使用下拉项目。下拉菜单在手机屏幕上是很难点的。直接利用标签页设置一个导航。代码也短，用户也不会不满意。关键是AmazeUI本来就提供这种布局。然后，你再于这个页面里面布置二级导航也可以。
效果如下：
代码如下：
同时，AmazeUI也提供另一种风格的标签页布局，效果如下：
代码如下：
最后贴一下整个页面的效果图与代码：
导航菜单 导航菜单-横排文字式
导航菜单-下拉列表式
导航菜单-标签页布局
导航菜单-标签页极简布局
到此这篇关于AmazeUI 导航条的实现示例的文章就介绍到这了,更多相关AmazeUI 导航条内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
相关内容
- AmazeUI导航的示例代码AmazeUi Tree(树形结构) 应用小结AmazeUI 折叠面板的实现代码AmazeUI框架搭建的方法步骤(图文)AmazeUI 面板的实现示例AmazeUI 列表的实现示例AmazeUI中各种的导航式菜单与解决方法
- AmazeUI 输入框组的示例代码AmazeUI 面板的实现示例AmazeUI 列表的实现示例AmazeUI 导航条的实现示例AmazeUI导航的示例代码AmazeUI 图标的示例代码AmazeUI 评论列表的实现示例AmazeUI 网格的实现示例AmazeUI框架搭建的方法步骤(图文)
- 网站性能延迟加载图像的五种技巧(小结)html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- AmazeUI 图标的示例代码AmazeUI 面板的实现示例AmazeUI 列表的实现示例AmazeUI 导航条的实现示例AmazeUI导航的示例代码AmazeUI 网格的实现示例AmazeUi Tree(树形结构) 应用小结
- AmazeUI 评论列表的实现示例AmazeUI 面板的实现示例AmazeUI 列表的实现示例AmazeUI 导航条的实现示例AmazeUI导航的示例代码AmazeUI 输入框组的示例代码AmazeUI 图标的示例代码AmazeUI 网格的实现示例AmazeUI框架搭建的方法步骤(图文)
- AmazeUI 网格的实现示例AmazeUI 面板的实现示例AmazeUI 列表的实现示例AmazeUI 导航条的实现示例AmazeUI导航的示例代码AmazeUI 图标的示例代码AmazeUi Tree(树形结构) 应用小结
- 清除canvas画布内容(点擦除+线擦除)canvas画布实现手写签名效果的示例代码canvas学习笔记之2d画布基础的实现canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法h5使用canvas画布实现手势解锁html5清空画布方法（三种）HTML5 画布canvas使用方法用html5的canvas画布绘制贝塞尔曲线完整代码html5的画布canvas——画出简单的矩形、三角形实例代码html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
- canvas小画板之平滑曲线的实现Canvas实现贝赛尔曲线轨迹动画的示例代码canvas进阶之如何画出平滑的曲线canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动基于canvas使用贝塞尔曲线平滑拟合折线段的方法canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)canvas仿写贝塞尔曲线的示例代码HTML5 canvas基本绘图之绘制曲线使用HTML5的Canvas绘制曲线的简单方法HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线使用canvas绘制贝塞尔曲线
- html5的pushstate以及监听浏览器返回事件的实现HTML5中外部浏览器唤起微信分享功能的代码HTML5中外部浏览器唤起微信分享html5使用html2canvas实现浏览器截图的示例处理HTML5新标签的浏览器兼容版问题如何查看浏览器对html5的支持情况
- canvas画图被放大且模糊的解决方法HTML5 Canvas实现放大镜效果示例canvas离屏技术与放大镜实现代码示例
