amazeui学习笔记--css(常用组件9)--导航nav
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 组件使用。
<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>
二、导航nav
Nav
导航样式组件,在 <ul>
链接列表中添加 .am-nav
class。
基本样式
<ul>
添加 .am-nav
class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度,可以结合网格使用。
<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
,形成一个水平导航。
<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
。
<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 时菜单会垂直堆叠(缩小浏览器窗口效果可以查看效果)。
<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
- 激活
<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>
上。
<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 组件使用。
<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 式
<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>
amazeui学习笔记--css(常用组件9)--导航nav的更多相关文章
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
随机推荐
- du---是对文件和目录磁盘使用的空间查看
du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 语法 du [选项][文件] 选项 -a或-all 显示目录中个 ...
- 超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集
原文:超好用的谷歌浏览器.Sublime Text.Phpstorm.油猴插件合集 - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|破解软件|www.52pojie.c ...
- 三种连接 & DOS & SYNFLOOD & 防御
accept的时候,三次连接是建立的. 有一种DOS攻击是SYN FLOOD,就是大量的SYN到达,但是没有ACK,无法建立起连接. 防御的方法,有多种,如下: 比如,禁止部分源地址: 到达一定阈值之 ...
- UI标签库专题九:JEECG智能开发平台 Choose(选则操作标签)
1. Choose(选则操作标签) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 hiddenName string 隐藏域的ID 否 null hiddenid string 隐藏 ...
- string StartsWith 方法 Https
public ActionResult Index() { string url = "Https://www.baodu.com"; ...
- GetInvocationList 委托链表
最近发现C#程序初始化时在构造函数中,偶尔出现事件注册不成功.后查资料发现有GetInvocationList 这么一个获取类中的委托链表的函数, 使用方法如下: 1.在需委托的类(Class1)中增 ...
- Android eclipse 提示java代码 快捷键
1.提示java代码能够用ALT+/ 键就能够了(前提是你要把你须要的类或方法的首字母打出来).我添加的部分:仅仅要输入sysout,然后alt+/键就能够输出System.out.prinln(), ...
- Effective C++ 条款43
学习处理模板化基类里的名称 本节作者编写的意图在我看来能够总结成一句话,就是"怎样定义并使用关于模板类的派生过程,怎样处理派生过程出现的编译不通过问题". 以下我们看一段说明性的代 ...
- Python笔记---错误笔记
Python---错误笔记 1. Python编码问题: 我们在编写 Python 脚本时,往往会写上中文凝视. 可是有时候,当我们执行程序时.却发现例如以下错误:SyntaxError: Non-A ...
- NOPI 锁定Excel单元格不让编辑的方法
简介:原生态纯JavaScript 100大技巧大收集---你值得拥有 http://www.cnblogs.com/xl900912/p/4223629.html 从博客园上看都的关于JS的一些常见 ...