amazeui学习笔记--css（常用组件9）--导航nav

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量181 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Renyi-Fan/p/9011997.html
版权

amazeui学习笔记--css（常用组件9）--导航nav

一、总结

 1、导航基本使用：<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。还是ul包li的形式。

<ul class="am-nav">
  <li class="am-active"><a href="#">首页</a></li>
  <li><a href="#">开始使用</a></li>
  <li><a href="#">按需定制</a></li>
</ul>

2、水平导航：在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。<ul class="am-nav am-nav-pills">各种li</ul>

3、标签式导航：在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 <li> 上添加 .am-active。<ul class="am-nav am-nav-tabs"></ul>

4、宽度自适应：在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度（通过display: table-cell 实现）。平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。

5、导航状态：

导航状态 class 添加在 <li> 上。

  • .am-disabled - 禁用
  • .am-active - 激活

6、 导航标题及分割线：

导航标题及分隔线目前仅适用于垂直菜单。

  • .am-nav-header 导航标题，直接放在 <li> 中。
  • .am-nav-divider 导航分隔线，添加到空的 <li> 上。

7、下拉菜单：需结合 JS Dropdown 组件使用。

 1 <ul class="am-nav am-nav-pills">
 2     <li class="am-active"><a href="#">首页</a></li>
 3     <li><a href="#">项目</a></li>
 4     <li class="am-dropdown" data-am-dropdown>
 5         <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
 6             菜单 <span class="am-icon-caret-down"></span>
 7         </a>
 8         <ul class="am-dropdown-content">
 9             <li class="am-dropdown-header">Header</li>
10             <li><a href="#">1. 一行代码，简单快捷</a></li>
11             <li class="am-active"><a href="#">2. 网址不变且唯一</a></li>
12             <li><a href="#">3. 内容实时同步更新</a></li>
13             <li class="am-disabled"><a href="#">4. 云端跨平台适配</a></li>
14             <li class="am-divider"></li>
15             <li><a href="#">5. 专属的一键拨叫</a></li>
16           </ul>
17     </li>
18 </ul>

 

 

 

 

 

二、导航nav

目录

导航样式组件，在 <ul> 链接列表中添加 .am-nav class。

基本样式

<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。

 Copy 
<ul class="am-nav">
  <li class="am-active"><a href="#">首页</a></li> <li><a href="#">开始使用</a></li> <li><a href="#">按需定制</a></li> </ul>

水平导航

在 .am-nav 的基础上再添加 .am-nav-pills，形成一个水平导航。

 Copy 
<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>

标签式导航

在 .am-nav 的基础上添加 .am-nav-tabs，形成一个标签式的导航。激活的标签在 <li> 上添加 .am-active。

 Copy 
<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>

宽度自适应

在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度（通过display: table-cell 实现）。

平均分配只在 media-up (> 640px) 有效，<= 640px 时菜单会垂直堆叠（缩小浏览器窗口效果可以查看效果）。

 Copy 
<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>

导航状态

导航状态 class 添加在 <li> 上。

  • .am-disabled - 禁用
  • .am-active - 激活
 Copy 
<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>

导航标题及分隔线

导航标题及分隔线目前仅适用于垂直菜单。

  • .am-nav-header 导航标题，直接放在 <li> 中。
  • .am-nav-divider 导航分隔线，添加到空的 <li> 上。
 Copy 
<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>

下拉菜单

需结合 JS Dropdown 组件使用。

 Copy 
<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>

Tab 式

 Copy 
<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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9011997.html

Angela㐅cc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
go学习笔记-文档-文档
07-21
go学习笔记-文档
amaze ui教程
xiaobaigushihui的博客
03-12 7931
Amaze UI 是一款跨屏的前端框架，是一款简单、灵活的用于搭建 Web 页面的 HTML、CSS、JavaScript 的工具集。 Amaze UI 面向现代浏览器开发，对于 IE 8/9 部分兼容，有限支持。相信不少朋友看见不兼容 IE 6、7，都望而生怯，对此只能表示你可能失去了一款优秀的框架。 Amaze UI JS 插件基于 jQuery 开发，使用时确保在 Amaze U
【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas
编程记录，亲测有效
05-08 5974
顶部导航条如果你细心留意下现在的页面，实在是太常见了。这个组件在手机端的页面中，同样可以借助AmazeUI这个前端框架实现。与此同时，可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种，一旦点击就大幅度下拉的导航了，反正我个人觉得很蛋疼的。一个导航活活地占据了页面大量位置。这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的。
TabPanel多标签tab页加载同一个GridPanel显示不同的数据
sky08050025的专栏
04-07 9811
<br />     前几天做了一个功能实现，在一个tabpanel上的多个tab标签存放同一个数据源里的的不同的数据，其中tab标签的title为自动生成的。其中存放数据里的容器为GridPanel，因为是同一个GridPanel，所以store是唯一一个，如里每个tab页都存放一个GridPanel的话，就需要同等量的store，这里会很麻烦。页面效果如下图：<br /> <br />其中，每个tab页里存放的不同的数据，加载数据的方式也为异步加载，点击事件触发时，加载数据。<br />上面四个tab标
amazeui.css
weixin_30861459的博客
01-17 147
http://amazeui.org/css/normalize 转载于:https://www.cnblogs.com/xiaoleiel/p/8300999.html
amazeui学习笔记--css（基本样式2）--基础设置Base
weixin_34344403的博客
05-08 193
amazeui学习笔记--css（基本样式2）--基础设置Base 一、总结 1、盒子模型：外margin，内padding，这里的内外指的边框 2、border-box：Amaze UI 将所有元素的盒模型设置为 border-box    -moz-box-sizing: border-box; 3、em和px：根据字号做相应变化的场景也使用了 em，需要像素级别精确的场景也使用了 p...
java学习笔记-Scokect.pdf
11-29
java学习笔记-Scokect.pdf
JSP学习笔记-2.pdf
11-28
JSP学习笔记-2.pdf
android学习笔记-clip.pdf
11-15
android学习笔记-clip.pdf
C语言学习笔记-详细而全面的基础教程.pdf
11-16
C语言学习笔记-详细而全面的基础教程.pdf
AmazeUI 列表的实现示例
11-19
最近在学习AmazeUI 框架的一些用法，本文主要介绍了AmazeUI 列表，分享给大家，也给自己留个笔记
前端框架amazeui
08-16
不错的前端框架，可以快速应用，不错的前端框架，可以快速应用，
中国首个开源 HTML5 跨屏前端框架 Amaze UI.zip
07-19
Amaze UI 开发思路通过拆分、封装一些常用的网页组件，以规范化采用云适配平台开发的移动网站，统一用户体验逐渐形成的。1、语义化 Amaze UI开发遵循语义化原则，意图通过类名（class）等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。2、移动优先，跨屏适配 遵循 “移动优先（Mobile First）”、“渐进增强（Progressive enhancement）”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建跨屏适配的网页。3、模块化，按需定制 AMUI使用LESS编写样式，结构良好，易扩展，易维护；使用Seajs模块化开发、组织 JavaScript，自然、优雅。4、专注于HTML5AMUI 基于轻量的Zepto.js开发，有效减少为兼容旧浏览器的臃肿代码；基于 CSS3 的交互效果，平滑、高效。AMUI专注于现代浏览器（支持HTML5），不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。5、本地化支持相比国外的前端框架，Amaze UI专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及App内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。Amaze UI 的开发历程云适配创始人陈本峰：这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品，Amaze UI能帮我们降低开发时间和成本，用标准化作业流程，能有更高的产出。从云适配创立之初，我们就开始积累自己的前端框架，同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中，大家一致反映不错，我们就希望把这个产品开源，希望分享给更多的人，也希望更多的人来贡献代码，来共建中国前端开源生态环境。在最近几个月，我们投入人力将这个项目整理成一个开源产品。目前有2个软件工程师全职在开发这个产品，还有一个设计，一个PM也在尽力配合。产品发布之后，我们会投入更多全职的工程师来专心打磨这个产品，同时也呼吁更多的前端开发爱好者共同来完善这个框架。Amaze UI的目标帮助开发者提高开发效率，提升网页效果，即用最短的时间做出最赞的网页，使更多的前端开发者不再受前端复杂代码困扰。下面是特性硬广Amaze UI 是中国首个开源 HTML5 跨屏前端框架，基于 React.js 开发的 Web 组件库。Amaze UI 是一个轻量级、Mobile first的前端框架， 基于开源社区流行前端框架编写。为移动而生Amaze UI 采用业内先进的 mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。组件丰富，模块化Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。本地化支持相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。轻量级，高性能Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。 标签：Amaze
amazeui学习之css类汇总
kshon的博客
11-13 649
一、布局相关  1、网格布局 css类 说明 am-g 网格中的列，用于包裹列，清楚列的浮动，宽度为100% am-g-fixed 限制最大宽度为1000px am-g-collapse 移除列的内边距 am-container 最大宽度为1000px，并且可以和网格内容对齐 am-u-xx-n 网格中的列，xx为视口区间（值为：sm...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 917
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 987
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
latex教程--latex排版学习笔记---入门提高
07-30
LaTeX是一个专业的排版系统，广泛用于学术论文、科技文档的编写。为了帮助初学者快速上手，有很多好的LaTeX教程可供学习。 首先，初学者可以选择最基础的LaTeX入门教程，了解LaTeX的基本语法和命令。这些教程通常会介绍如何建立LaTeX文档框架、使用不同的字体和排版效果，以及如何插入数学公式等常见的操作。初学者可以通过参考这些教程来完成自己的第一篇LaTeX文档，以熟悉LaTeX的基本使用方法。 一旦掌握了基本的LaTeX知识，可以进一步提高自己的排版技巧。这时候，就可以选择一些LaTeX排版学习笔记来学习了。这些学习笔记通常会提供更深入的LaTeX知识讲解，如如何自定义命令和环境、如何制作漂亮的表格和图表等高级技巧。通过学习这些学习笔记，可以让自己的文档更加专业和美观。 在学习过程中，不仅要注意理论知识的掌握，还要多加练习。可以使用一些LaTeX模板来练习，例如写一篇论文、制作演示文稿等。不断地练习和实践可以巩固所学的知识，并逐渐提高自己的LaTeX水平。 总之，LaTeX教程和学习笔记是学习LaTeX的重要资源，初学者可以通过这些资源来系统地学习和提高自己的LaTeX排版能力。除了阅读教程和学习笔记，多加练习、参考优秀的LaTeX作品也是提高自己的最好方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值