您好,欢迎来到聚站网!
当前位置:聚站网 » 站长资讯 » 互联网资讯 » 优化推广 » 文章详细

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

来源:网络 浏览:153次 时间:2021-11-15

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

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

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

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


       


           


             网站Logo
           


           
           
                其它
               
           
  

然后是侧边栏的代码:

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


<!doctype html>


   
       
       
       
       
       
       
       
       
       
       
       
       
       
       
        Header
   
 
   
     
       


           


             网站Logo
           


           
           
                其它
               
           
  


       


       


           
               
                   
                             
    • 侧边栏菜单

                             
    • ----------

                             
    • 功能1

                             
    • 功能2

                             
    • 功能3

                       

               
           
       


       


 

 

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

总结

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

推荐站点

  • 高仿包高仿包

    竭誠精品-高仿世界名牌包包專賣網主營高仿LV包,高仿GUCCI古奇包,高仿HERMES愛馬仕,高仿CHANEL香奈兒,高仿PRADA,高仿巴黎世家等國際高仿包包、1比1高仿女包、高仿包、精仿奢侈品、世界名包、皮帶、皮具、手表、飾品等。LV新款包包同步香港LV專櫃及LV官方網站,LV行業最好品質!

    awhso.net
  • YY分类目录YY分类目录

    YY分类目录全人工编辑的开放式网站分类目录,收录国内外、各行业优秀网站,旨在为用户提供网站分类目录检索、优秀网站参考、网站推广服务。

    www.yydir.com
  • 70网站目录70网站目录

    全人工编辑的开放式网站分类目录,免费收录国内外、各行业优秀网站,旨在为用户提供网站分类目录检索、优秀网站参考、网站推广服务。

    www.70dir.com
  • 25分类目录25分类目录

    25分类目录专业提供网站网址免费提交收录,25分类目录是采用开放导航式的网站大全,收录国内外各行业优秀的网站网址,让网站在各大搜索引擎收录快排名靠前。

    www.25dir.com
  • 99网站目录99网站目录

    久久网站目录采用全人工编辑的开放式网站分类目录,久久网站大全免费收录国内外、各行业优秀网站网址,旨在为用户提供网站分类目录检索、优秀网站参考、网站推广服务。

    https://www.99dir.com