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

2020-11-04 16:20 jianzhan

与Bootstrap一样,AmazeUI出示的导航栏式莱单也是喜爱蜷缩在右上方的一个按键里边,随后一点一下就往下打开一一大段间距。那样很不友善。先前《【AmazeUI】手机上版网页页面的顶端导航栏条Header与侧面导航栏栏offCanvas》(点一下开启连接)是一种处理计划方案,可是针对一些不应用网页页面的网页页面,这类计划方案则无能乏力。

针对此有以下的几类计划方案能够处理:

一、更新改造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 class="am-divider"意思是切分线。

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

实际上手机上里边的导航栏确实不必应用往下拉新项目。往下拉莱单手中机显示屏上是难以点的。立即运用标识页设定一个导航栏。编码也短,客户都不会不满意意。重要是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导航栏式莱单內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!