如何手机网站建立,建设银行泰安分行网站,上海市虹口市容建设公司网站,20元备案域名拥有易用的导航条对于任何网站都很重要。本文主要介绍了AmazeUI 导航条的实现示例#xff0c;分享给大家#xff0c;具体如下#xff1a;导航条Amaze UI导航切换 首页项目下拉 标题1. 去月球2. 去火星3. 还是回地球4. 下地狱5. 桥头一回首其他 注册随便看看登录....am-topba…拥有易用的导航条对于任何网站都很重要。本文主要介绍了AmazeUI 导航条的实现示例分享给大家具体如下导航条Amaze UI导航切换 首页项目下拉 标题1. 去月球2. 去火星3. 还是回地球4. 下地狱5. 桥头一回首其他 注册随便看看登录....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;}Amaze UI...Amaze UIdata-am-collapse{target: #doc-topbar-collapse-4}导航切换 classam-icon-bars首页项目下拉 带我去月球还是回地球臣妾做不到Amaze UIdata-am-collapse{target: #doc-topbar-collapse-5}导航切换 classam-icon-bars首页项目上拉 带我去月球还是回地球臣妾做不到效果图AmazeUI各种的导航式菜单与解决方法一、改造AmazeUI提供的手机端文字横排菜单AmazeUI提供的手机端文字横排菜单的背景颜色是白色的字体是蓝色的没有提供相应的class去改写里面的字体我们可以为背景与文字添加一个css改写其背景与文字颜色效果如下代码如下导航菜单-横排文字式/*这里是改写文字的颜色*/.am-menu-default .am-menu-nav a {color:#222;}/*这里是改写背景的颜色*/.am-menu-nav{background:#f1f1f1;}项目1项目1-1项目1-2项目1-3项目1-4项目1-5项目1-6项目2项目3项目4项目5项目5-1项目5-2项目5-3项目5-4项目5-5项目5-6二、利用按钮组与下拉按钮这里运用了解决Bootstrap导航栏的思想《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》(点击打开链接)但是AmazeUI的按钮组与下拉按钮的复合相当不给力。没有提供下拉按钮与按钮复合的按钮组。同时其栅格化布局也无法约束其下拉按钮的大小因此必须自己整几个div调节其width与margin属性规范其大小。效果如下代码如下导航菜单-下拉列表式/*让每一个下拉按钮占据的宽度与居中*/.am-dropdown{width:30%;text-align:center;}项目1项目1-1项目1-2项目1-3项目2项目3项目3-1项目3-2项目3-3项目3-4项目4项目5项目5-1项目5-2项目5-3项目5-4项目6这里每一行最好放置3个组件就好设置css为text-align:center还要补上一个margin-left:-1.5%才刚好其居中width:100%占据一行。其下的各个div占据30%的宽度。接着的各个按钮、下拉按钮其宽度必须是110%这样才能刚刚配合好原来的样式把按钮与下拉按钮符合起来。其中里面的li意为分割线。三、利用无下拉项目的标签页其实手机里面的导航真的无须使用下拉项目。下拉菜单在手机屏幕上是很难点的。直接利用标签页设置一个导航。代码也短用户也不会不满意。关键是AmazeUI本来就提供这种布局。然后你再于这个页面里面布置二级导航也可以。效果如下代码如下导航菜单-标签页布局项目1项目2项目3项目4项目5项目6项目7同时AmazeUI也提供另一种风格的标签页布局效果如下代码如下导航菜单-标签页极简布局项目1项目2项目3项目4项目5项目6最后贴一下整个页面的效果图与代码导航菜单导航菜单-横排文字式/*这里是改写文字的颜色*/.am-menu-default .am-menu-nav a {color:#222;}/*这里是改写背景的颜色*/.am-menu-nav{background:#f1f1f1;}项目1项目1-1项目1-2项目1-3项目1-4项目1-5项目1-6项目2项目3项目4项目5项目5-1项目5-2项目5-3项目5-4项目5-5项目5-6导航菜单-下拉列表式/*让每一个下拉按钮占据的宽度与居中*/.am-dropdown{width:30%;text-align:center;}项目1项目1-1项目1-2项目1-3项目2项目3项目3-1项目3-2项目3-3项目3-4项目4项目5项目5-1项目5-2项目5-3项目5-4项目6导航菜单-标签页布局项目1项目2项目3项目4项目5项目6项目7导航菜单-标签页极简布局项目1项目2项目3项目4项目5项目6到此这篇关于AmazeUI 导航条的实现示例的文章就介绍到这了,更多相关AmazeUI 导航条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家
