• 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 组件使用。

     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

    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>
  • 相关阅读:
    【Revit API】改变填充区域的填充样式
    【Revit API】创建共享参数
    【Revit API】墙体分割
    【Revit API】FamilyInstance、FamilySymbol、Family的寻找关系
    【Revit API】创建相机视角
    【Revit API】获取链接模型中构件
    【Revit API】梁的净高分析
    【Revit API】脱离中心文件
    【Revit API】创建工作集并将element加入工作集中
    常用的XML解析函数
  • 原文地址：https://www.cnblogs.com/Renyi-Fan/p/9011997.html
Copyright © 2020-2023  润新知