base13.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. $('.weui-menu-inner').click(function () {
  14. var $menu = $(this).find('ul'),
  15. height = $menu.find('li').length * 40 + 15 + 'px',
  16. opacity = $menu.css('opacity');
  17. $('.weui-menu-inner ul').css({
  18. 'top': '0',
  19. 'opacity': '0'
  20. });
  21. if(opacity == 0) {
  22. $menu.css({
  23. 'top': '-' + height,
  24. 'opacity': 1
  25. });
  26. }else {
  27. $menu.css({
  28. 'top': 0,
  29. 'opacity': 0
  30. });
  31. }
  32. });
  33. });
  34. </script>
  35. </head>
  36. <body ontouchstart style="background-color: #f8f8f8;">
  37. <section class="weui-menu">
  38. <div class="weui-menu-inner">
  39. <em></em>
  40. <span>内测</span>
  41. <ul>
  42. <em></em>
  43. <li>微信</li>
  44. <li>QQ</li>
  45. <li>陌陌</li><li>陌陌陌陌陌陌</li>
  46. </ul>
  47. </div>
  48. <div class="weui-menu-inner">
  49. <em></em>
  50. <span>公测</span>
  51. <ul>
  52. <em></em>
  53. <li>淘宝</li>
  54. <li>支付宝</li>
  55. <li>天猫</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li>
  56. </ul>
  57. </div>
  58. <div class="weui-menu-inner">
  59. <em></em>
  60. <span>上线测试</span>
  61. <ul>
  62. <em></em>
  63. <li>百度地图</li>
  64. <li>百度一下</li>
  65. <li>百度智能</li>
  66. </ul>
  67. </div>
  68. </section>
  69. </body>
  70. </html>