注册有礼

AmazeUI怎么实现多种导航式菜单及相关问题如何解决

Admin 2022-07-02 群英技术资讯 867 次浏览

上一篇：AmazeUI中如何制作加载进度条，代码是什么 下一篇：AmazeUi如何实现简单的Tree树形结构，代码是什么
这篇文章主要介绍“AmazeUI怎么实现多种导航式菜单及相关问题如何解决”，有一些人在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 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内核渲染-->
        <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怎么实现多种导航式菜单及相关问题如何解决的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。 群英智防CDN，智能加速解决方案
标签： AmazeUI导航式菜单

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：AmazeUI中如何制作加载进度条，代码是什么 下一篇：AmazeUi如何实现简单的Tree树形结构，代码是什么

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服