聚站网(手机站)有215个分类 55513个网站 2592篇文章
聚站网|网址导航|网站导航手机站LOGO
当前位置:聚站网 » 站长资讯 » 互联网资讯 » 优化推广 » 文章详细
AmazeUI手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
 
发布时间:2021-11-15 浏览:152次

这篇文章主要介绍了AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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


       


           


             网站Logo
           


           
           
                其它
               
           
  

然后是侧边栏的代码:

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


<!doctype html>


   
       
       
       
       
       
       
       
       
       
       
       
       
       
       
        Header
   
 
   
     
       


           


             网站Logo
           


           
           
                其它
               
           
  


       


       


           
               
                   






               
           
       


       


 

 

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

总结

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

  • ┃ 来源: 网络转载
  • ┃ 标签: amazeui
  • 上一篇: 刷相关搜索是什么原理
  • 下一篇: 什么文章会涉嫌侵权?原创和抄袭有什么区别?
  • ┃ 推荐资讯
    ┃ 今日新闻投稿
    ┃ 最新收录网站

     返回顶部