Amaze UI

Topbar 导航条


常用于网页顶部放置 Logo、导航等信息。

由于需求的差异性,很难整理出一个适合不同网站的导航条组件,Amaze UI 现在整理的版本适合导航条相对简单(Logo + 链接 + 按钮 + 搜索框)的页面,后续还会进一步优化。

基本样式

默认样式(浅色)

Copy
<header class="am-topbar">
  <h1 class="am-topbar-brand">
    <a href="#">Amaze UI</a>
  </h1>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
    <ul class="am-nav am-nav-pills am-topbar-nav">
      <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">职务</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>

    <form class="am-topbar-form am-topbar-left am-form-inline" role="search">
      <div class="am-form-group">
        <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
      </div>
    </form>

    <div class="am-topbar-right">
      <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
        <ul class="am-dropdown-content">
          <li><a href="#">注册</a></li>
          <li><a href="#">随便看看</a></li>
        </ul>
      </div>
    </div>

    <div class="am-topbar-right">
      <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
    </div>
  </div>
</header>

在容器上添加 .am-topbar class,然后按照示例组织所需内容。

在线运行

深色样式

Copy
<header class="am-topbar am-topbar-inverse">
  <h1 class="am-topbar-brand">
    <a href="#">Amaze UI</a>
  </h1>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse-2'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-2">
    <ul class="am-nav am-nav-pills am-topbar-nav">
      <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">职务</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>

    <form class="am-topbar-form am-topbar-left am-form-inline" role="search">
      <div class="am-form-group">
        <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
      </div>
    </form>

    <div class="am-topbar-right">
      <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
        <ul class="am-dropdown-content">
          <li><a href="#">注册</a></li>
          <li><a href="#">随便看看</a></li>
        </ul>
      </div>
    </div>

    <div class="am-topbar-right">
      <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
    </div>
  </div>
</header>

在容器上添加 .am-topbar-inverse,调整为背景色为主色调的样式,内部结构同上。

在线运行

Logo 图片替换

Copy
<style type="text/css">
  .am-topbar .am-text-ir {
  display: block;
  margin-right: 10px;
  height: 70px;
  width: 140px;
  background: url(http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;
  -webkit-background-size: 125px 24px;
  background-size: 125px 24px;
}
</style>
<header class="am-topbar am-topbar-inverse">
  <h1 class="am-topbar-brand">
    <a href="#" class="am-text-ir"></a>
  </h1>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
          data-am-collapse="{target: '#doc-topbar-collapse-3'}"><span class="am-sr-only">导航切换</span> <span
      class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-3">
    <ul class="am-nav am-nav-pills am-topbar-nav">
      <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><a href="#">北京市</a></li>
          <li><a href="#">上海市</a></li>
          <li class="am-disabled"><a href="#">重庆市</a></li>
        </ul>
      </li>
    </ul>
  </div>
</header>

结合辅助 Class .am-text-ir 使用,需要手动设置替换的背景图片。

在线运行

顶部、底部固定

顶部固定

.am-topbar 上添加 .am-topbar-fixed-top class,实现顶部固定。

包含顶部固定导航条的页面会在 body 上添加 .am-with-topbar-fixed-top,用户可以在这个 class 下设置样式,默认设置了 padding-top: 51px

<header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
  <div class="am-container">
    <h1 class="am-topbar-brand">
      <a href="#" class="am-text-ir">Amaze UI</a>
    </h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#doc-topbar-collapse-4'}"><span class="am-sr-only">导航切换</span> <span
        class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-4">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <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><a href="#">带我去月球</a></li>
            <li><a href="#">还是回地球</a></li>
            <li class="am-disabled"><a href="#">臣妾做不到</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>

底部固定

.am-topbar 上添加 .am-topbar-fixed-bottom class,实现底部固定。

包含底部固定导航条的页面会在 body 上添加 .am-with-topbar-fixed-bottom,用户可以在这个 class 下设置样式,默认设置了 padding-bottom: 51px

<header class="am-topbar am-topbar-inverse am-topbar-fixed-bottom">
  <div class="am-container">
    <h1 class="am-topbar-brand">
      <a href="#" class="am-text-ir">Amaze UI</a>
    </h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#doc-topbar-collapse-5'}"><span class="am-sr-only">导航切换</span> <span
        class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-5">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <li class="am-active"><a href="#">首页</a></li>
        <li><a href="#">项目</a></li>
        <li class="am-dropdown am-dropdown-up" data-am-dropdown>
          <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            上拉 <span class="am-icon-caret-up"></span>
          </a>
          <ul class="am-dropdown-content">
            <li><a href="#">带我去月球</a></li>
            <li><a href="#">还是回地球</a></li>
            <li class="am-disabled"><a href="#">臣妾做不到</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</header>