成都网站建设设计

将想法与焦点和您一起共享

AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas怎么实现

小编给大家分享一下AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas怎么实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供网站设计制作、网站制作、网站策划、网页设计、空间域名、虚拟主机、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

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

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

AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas怎么实现
 

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


        
            
           		网站Logo
            
            
            
                其它
                
            

然后是侧边栏的代码:

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





    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        Header
    
 
    
    	
        
            
           		网站Logo
            
            
            
                其它
                
            
                                                                                             侧边栏菜单                         
  • ----------
  •                         
  • 功能1
  •                         
  • 功能2
  •                         
  • 功能3
  •                                      
                                  

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

    以上是“AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    分享文章:AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas怎么实现
    网页网址:http://chengdu.cdxwcx.cn/article/igjsdi.html

    其他资讯