这几天雯雯木研究了手机端的侧边栏,和大家分享下,废话不多说了,上代码。 1,头部引入:
<link rel="stylesheet" href="css/drawer.min.css"> <script src="js/jquery.min.js"></script> <script src="js/iscroll.js"></script> <script src="js/jquery.drawer.min.js"></script> <style type="text/css"> a{ text-decoration:none; } .drawer-main{ width:280px; text-align:center; }
</style> ,2,body里引入: <body class="drawer drawer-right"> <!----> <div class="drawer-toggle drawer-hamberger" ><img src="img/sm.png" /></div>
<div class="drawer-main drawer-default"> <nav class="drawer-nav" role="navigation"> <div class="drawer-brand"> <a href="#">HYJ导航</a> </div> <ul class="drawer-nav-list"> <li><a href="{:U('Index/index')}">首页</a></li> <li><a href="{:U('Pro/pro')}">产品展示</a></li> <li><a href="{:U('Info/about')}">了解我们</a></li> <li><a href="{:U('News/news')}">新闻资讯</a></li> <li><a href="{:U('Info/talent')}">人才招聘</a></li> <li><a href="{:U('Info/download')}">在线下载</a></li> <li><a href="{:U('Info/contact')}">联系我们</a></li> <li><a href="{:U('Info/message')}">在线留言</a></li> </ul> </nav> </div> <script> $(document).ready(function(){ $('.drawer').drawer(); $('.js-trigger').click(function(){ $('.drawer').drawer("open"); }); }); </script> <!----> </body>