IT俱乐部 HTML5 AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码

AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码

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

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


 

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

1
2
3
4
5
6
7
8
9
10
<div class="am-topbar am-topbar-inverse">
    <h1 class="am-topbar-brand">
        <a href="#">网站Logo</a>
    </h1>
    <div class="am-topbar-right am-fr">
     
        <button class="am-topbar-btn am-btn am-btn-sm am-btn-primary">其它</button>
        <button class="am-topbar-btn am-btn am-btn-sm am-btn-primary" data-am-offcanvas="{target: '#offcanvasId'}"><span class="am-icon-bars"></span></button>
    </div>
</div>

然后是侧边栏的代码:

因此,整个页面的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
     
        <title>Header</title><div class="am-topbar am-topbar-inverse">
            <h1 class="am-topbar-brand">
                <a href="mIndex-index.html">网站Logo</a>
            </h1>
            <div class="am-topbar-right am-fr">
             
                <button class="am-topbar-btn am-btn am-btn-sm am-btn-primary">其它</button>
                <button class="am-topbar-btn am-btn am-btn-sm am-btn-primary" data-am-offcanvas="{target: '#offcanvasId'}"><span class="am-icon-bars"></span></button>
            </div>
        </div>
         
        <div id="offcanvasId" class="am-offcanvas">
            <div class="am-offcanvas-bar">
                <div class="am-offcanvas-content">
                    <ul class="am-menu-nav am-avg-sm-1">
<li class="">侧边栏菜单</li>
                        <li>----------</li>
                        <li><a href="#">功能1</a></li>
                        <li><a href="#">功能2</a></li>
                        <li><a href="#">功能3</a></li>
                    </ul>
</div>
            </div>
        </div>
         
    

值得注意的是,此顶部导航条Header不会出现,滚动条怎么滚动,都一直悬停在头部的情况。相当于一个普通的页面内容而已。

总结

到此这篇关于AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码的文章就介绍到这了,更多相关AmazeUI 顶部导航条Header与侧边导航栏offCanvas内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/13855.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部