AmazeUI 导航栏条⊙﹏⊙的完成实例

日期：2021-03-23 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

有着实用的导航栏条针对一切网站都太重要。文中关键详细介绍了AmazeUI 导航栏条的完成实例，共享给大伙儿，实际以下：

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>导航栏条</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<!--默认设置款式-->
<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>

<!--深色款式-->
<header class="am-topbar am-topbar-inverse">
 ...
</header>

<!--Logo 照片更换-->
<style>
 .am-topbar .am-text-ir {
  display: block;
  margin-right: 10px;
  height: 50px;
  width: 125px;
  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">Amaze UI</a>
 </h1>
 ...
</header>
<!--顶端固定不动-->
<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>
<!--底端固定不动-->
<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>
<div style="height: 10000px;"></div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

实际效果图：

AmazeUI各种各样的导航栏式莱单与处理方式

一、更新改造AmazeUI出示的手机上端文本横排莱单

AmazeUI出示的手机上端文本横排莱单的情况色调是乳白色的，字体样式是深蓝色的，沒有出示相对的class去改变里边的字体样式，

大家能够为情况与文本加上一个css，改变其情况与文本色调

实际效果以下：

编码以下：

  <h1>导航栏莱单-横排文本式</h1>
        <style>
            /*这儿是改变文本的色调*/
            .am-menu-default .am-menu-nav a {
                color:#222;
            }
            /*这儿是改变情况的色调*/
            .am-menu-nav{
                background:#f1f1f1;
            }
        </style>
        <div data-am-widget="menu" class="am-menu  am-menu-default" >
            <a href="javascript: void(0)" class="am-menu-toggle a-in-menu"><i class="am-menu-toggle-icon am-icon-bars"></i></a>
            <!--表明每个莱单都占3格，也便是在12格1行的合理布局中占有4格的部位-->
            <ul class="am-menu-nav am-avg-sm-3">
                <!--表明这一新项目带往下拉莱单-->
                <li class="am-parent">
                    <a href="#">新项目1</a>
                    <ul class="am-menu-sub am-collapse am-avg-sm-4">
                        <li><a href="#">新项目1-1</a></li>
                        <li><a href="#">新项目1-2</a></li>
                        <li><a href="#">新项目1-3</a></li>
                        <li><a href="#">新项目1-4</a></li>
                        <li><a href="#">新项目1-5</a></li>
                        <li><a href="#">新项目1-6</a></li>
                    </ul>
                </li>
                <li><a href="#">新项目2</a></li>
                <li><a href="#">新项目3</a></li>
                <li><a href="#">新项目4</a></li>
                <li class="am-parent">
                    <a href="#">新项目5</a>
                    <ul class="am-menu-sub am-collapse am-avg-sm-4">
                        <li><a href="#">新项目5-1</a></li>
                        <li><a href="#">新项目5-2</a></li>
                        <li><a href="#">新项目5-3</a></li>
                        <li><a href="#">新项目5-4</a></li>
                        <li><a href="#">新项目5-5</a></li>
                        <li><a href="#">新项目5-6</a></li>
                    </ul>
                </li>
    
            </ul>
        </div>

二、运用按键组与往下拉按键

这儿应用掌握决Bootstrap导航栏栏的观念，《【Bootstrap】导航栏栏navbar在IE8上的缺点与处理计划方案》（点一下开启连接），可是AmazeUI的按键组与往下拉按键的复合型非常不行。沒有出示往下拉按键与按键复合型的按键组。同时，其栅格数据化合理布局也没法管束其往下拉按键的尺寸，因而，务必自身整好多个div，调整其width与margin特性，标准其尺寸。

实际效果以下：

编码以下：

   <h1>导航栏莱单-往下拉目录式</h1>
        <style>
            /*让每个往下拉按键占有的总宽与垂直居中*/
            .am-dropdown{
                width:30%;
                text-align:center;
            }
        </style>
        <!--这儿表明一行-->
        <div style="text-align:center; width:100%; margin-left:-1.5%">
            <div class="am-dropdown" data-am-dropdown>
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目1<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目1-1</a></li>
                    <li><a href="#">新项目1-2</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目1-3</a></li>
                </ul>
            </div>
            <div class="am-dropdown" data-am-dropdown >
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目2</button>        
            </div>
            <div class="am-dropdown" data-am-dropdown>
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目3<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目3-1</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目3-2</a></li>
                    <li><a href="#">新项目3-3</a></li>
                    <li><a href="#">新项目3-4</a></li>
                </ul>
            </div>
        </div>
        <!--干完一行，务必自身再开一行-->
        <div style="text-align:center; width:100%; margin-left:-1.5%">
            <div class="am-dropdown" data-am-dropdown>    
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目4</button>
            </div>
            <div class="am-dropdown" data-am-dropdown >
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目5<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目5-1</a></li>                
                    <li><a href="#">新项目5-2</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目5-3</a></li>
                    <li><a href="#">新项目5-4</a></li>
                </ul>
            </div>
            <div class="am-dropdown" data-am-dropdown>    
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目6</button>
            </div>
        </div>

这儿，每一行最好置放3个部件就行，设定css为text-align:center，也要补好一个margin-left:-1.5%才恰好其垂直居中，width:100%占有一行。

其下的每个div占有30%的总宽。然后的每个按键、往下拉按键其总宽务必是110%，那样才可以不久相互配合好原先的款式，把按键与往下拉按键合乎起來。

在其中，里边的li意思是切分线。

三、运用无往下拉新项目的标识页

实际上手机上里边的导航栏确实不必应用往下拉新项目。往下拉莱单手中机显示屏上是难以点的。立即运用标识页设定一个导航栏。编码也短，客户都不会不满意意。重要是AmazeUI原本就出示这类合理布局。随后，你再于这一网页页面里边布局二级导航栏还可以。

实际效果以下：

编码以下：

      <h1>导航栏莱单-标识页合理布局</h1>
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav">
                <li class="am-active"><a href="#">新项目1</a></li>
                <li><a href="#">新项目2</a></li>
                <li><a href="#">新项目3</a></li>
                <li><a href="#">新项目4</a></li>
            </ul>
            <ul class="am-tabs-nav">
                <li><a href="#">新项目5</a></li>
                <li><a href="#">新项目6</a></li>
                <li><a href="#">新项目7</a></li>
            </ul>
        </div>

同时，AmazeUI也出示另外一种设计风格的标识页合理布局，实际效果以下：

编码以下：

     <h1>导航栏莱单-标识页极简合理布局</h1>
        <div data-am-widget="tabs" class="am-tabs am-tabs-default">
            <ul class="am-tabs-nav">
                <li><a href="#">新项目1</a></li>
                <li><a href="#">新项目2</a></li>
                <li class="am-active"><a href="#">新项目3</a></li>
            </ul>
            <ul class="am-tabs-nav">
                <li><a href="#">新项目4</a></li>
                <li><a href="#">新项目5</a></li>
                <li><a href="#">新项目6</a></li>
            </ul>
        </div>

最终贴一下全部网页页面的实际效果图与编码：

<!--应用HTML5开发设计-->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--全自动适应移动显示屏-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--优先选择应用webkit核心3D渲染-->
        <meta name="renderer" content="webkit">
        <!--不必被百度搜索转换格式-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--下列才算是引进amazeui資源-->
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引进js的情况下要留意，务必先引进jQuery，再引进amazeui，由于这一架构是根据jQuery开发设计的-->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>导航栏莱单</title>
    </head>  
    <body>    
        <h1>导航栏莱单-横排文本式</h1>
        <style>
            /*这儿是改变文本的色调*/
            .am-menu-default .am-menu-nav a {
                color:#222;
            }
            /*这儿是改变情况的色调*/
            .am-menu-nav{
                background:#f1f1f1;
            }
        </style>
        <div data-am-widget="menu" class="am-menu  am-menu-default" >
            <a href="javascript: void(0)" class="am-menu-toggle a-in-menu"><i class="am-menu-toggle-icon am-icon-bars"></i></a>
            <!--表明每个莱单都占3格，也便是在12格1行的合理布局中占有4格的部位-->
            <ul class="am-menu-nav am-avg-sm-3">
                <!--表明这一新项目带往下拉莱单-->
                <li class="am-parent">
                    <a href="#">新项目1</a>
                    <ul class="am-menu-sub am-collapse am-avg-sm-4">
                        <li><a href="#">新项目1-1</a></li>
                        <li><a href="#">新项目1-2</a></li>
                        <li><a href="#">新项目1-3</a></li>
                        <li><a href="#">新项目1-4</a></li>
                        <li><a href="#">新项目1-5</a></li>
                        <li><a href="#">新项目1-6</a></li>
                    </ul>
                </li>
                <li><a href="#">新项目2</a></li>
                <li><a href="#">新项目3</a></li>
                <li><a href="#">新项目4</a></li>
                <li class="am-parent">
                    <a href="#">新项目5</a>
                    <ul class="am-menu-sub am-collapse am-avg-sm-4">
                        <li><a href="#">新项目5-1</a></li>
                        <li><a href="#">新项目5-2</a></li>
                        <li><a href="#">新项目5-3</a></li>
                        <li><a href="#">新项目5-4</a></li>
                        <li><a href="#">新项目5-5</a></li>
                        <li><a href="#">新项目5-6</a></li>
                    </ul>
                </li>
    
            </ul>
        </div>
        
        <h1>导航栏莱单-往下拉目录式</h1>
        <style>
            /*让每个往下拉按键占有的总宽与垂直居中*/
            .am-dropdown{
                width:30%;
                text-align:center;
            }
        </style>
        <!--这儿表明一行-->
        <div style="text-align:center; width:100%; margin-left:-1.5%">
            <div class="am-dropdown" data-am-dropdown>
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目1<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目1-1</a></li>
                    <li><a href="#">新项目1-2</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目1-3</a></li>
                </ul>
            </div>
            <div class="am-dropdown" data-am-dropdown >
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目2</button>        
            </div>
            <div class="am-dropdown" data-am-dropdown>
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目3<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目3-1</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目3-2</a></li>
                    <li><a href="#">新项目3-3</a></li>
                    <li><a href="#">新项目3-4</a></li>
                </ul>
            </div>
        </div>
        <!--干完一行，务必自身再开一行-->
        <div style="text-align:center; width:100%; margin-left:-1.5%">
            <div class="am-dropdown" data-am-dropdown>    
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目4</button>
            </div>
            <div class="am-dropdown" data-am-dropdown >
                <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle style="width:110%;" >新项目5<span class="am-icon-caret-down"></span></button>
                <ul class="am-dropdown-content">
                    <li><a href="#">新项目5-1</a></li>                
                    <li><a href="#">新项目5-2</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">新项目5-3</a></li>
                    <li><a href="#">新项目5-4</a></li>
                </ul>
            </div>
            <div class="am-dropdown" data-am-dropdown>    
                <button type="button" class="am-btn am-btn-primary" style="width:110%;" onClick="javascript:window.location.href='#'">新项目6</button>
            </div>
        </div>
        
        <h1>导航栏莱单-标识页合理布局</h1>
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav">
                <li class="am-active"><a href="#">新项目1</a></li>
                <li><a href="#">新项目2</a></li>
                <li><a href="#">新项目3</a></li>
                <li><a href="#">新项目4</a></li>
            </ul>
            <ul class="am-tabs-nav">
                <li><a href="#">新项目5</a></li>
                <li><a href="#">新项目6</a></li>
                <li><a href="#">新项目7</a></li>
            </ul>
        </div>
        
        <h1>导航栏莱单-标识页极简合理布局</h1>
        <div data-am-widget="tabs" class="am-tabs am-tabs-default">
            <ul class="am-tabs-nav">
                <li><a href="#">新项目1</a></li>
                <li><a href="#">新项目2</a></li>
                <li class="am-active"><a href="#">新项目3</a></li>
            </ul>
            <ul class="am-tabs-nav">
                <li><a href="#">新项目4</a></li>
                <li><a href="#">新项目5</a></li>
                <li><a href="#">新项目6</a></li>
            </ul>
        </div>
        
    </body>
</html>

到此这篇有关AmazeUI 导航栏条的完成实例的文章内容就详细介绍到这了,大量有关AmazeUI 导航栏条內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：江阴手机微信微信小程序 返回下一篇：没有了