手機端側邊欄
這幾天雯雯木研究了手機端的側邊欄，和大家分享下，廢話不多說了，上程式碼。
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>