诚之和:html5AmazeUI顶部导航条与侧边导航栏实现案例分析！

今天和大家分享有关于“html5AmazeUI顶部导航条与侧边导航栏实现案例分析！”这方面的相关内容分享，希望小编的分享对大家有所帮助！

顶部导航条如果你细心留意下现在的页面，实在是太常见了。这个组件在手机端的页面中，同样可以借助AmazeUI这个前端框架实现。与此同时，可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种，一旦点击就大幅度下拉的导航了，反正我个人觉得很蛋疼的。一个导航活活地占据了页面大量位置。这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的。

使用AmazeUI做出来的效果如下：

 

首先是顶部导航栏的代码：

<!--这里的顶部导航栏与Bootstrap一种，也只提供深浅两色。唯一不同的是，Bootstrap是灰黑两色，AmazeUI则是灰蓝两色。去掉am-topbar-inverse则显示灰色-->
        <div class="am-topbar am-topbar-inverse">
            <h1 class="am-topbar-brand">
           		<a href="#">网站Logo</a>
            </h1>
            <div class="am-topbar-right am-fr">
            <!--在导航栏的最右方，