AmazeUI中各种的导航式菜单与解决技巧

发布时间：2021-10-12 15:15:35 所属栏目：动态来源：互联网

导读：这篇文章主要介绍了AmazeUI中各种的导航式菜单与解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参

与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>

</ul>

</li>

</ul>

</li>

</ul>

</div>

二、利用按钮组与下拉按钮

这里运用了解决Bootstrap导航栏的思想，《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》（点击打开链接），但是AmazeUI的按钮组与下拉按钮的复合相当不给力。没有提供下拉按钮与按钮复合的按钮组。同时，其栅格化布局也无法约束其下拉按钮的大小，因此，必须自己整几个div，调节其width与margin属性，规范其大小。

效果如下：

代码如下：

<h1>导航菜单-下拉列表式</h1>

<style>

/*让每一个下拉按钮占据的宽度与居中*/

.am-dropdown{

width:30%;

text-align:center;

}

</style>

</ul>