1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- <script>
- $(function(){
- $('.weui-menu-inner').click(function () {
- var $menu = $(this).find('ul'),
- height = $menu.find('li').length * 40 + 15 + 'px',
- opacity = $menu.css('opacity');
- $('.weui-menu-inner ul').css({
- 'top': '0',
- 'opacity': '0'
- });
- if(opacity == 0) {
- $menu.css({
- 'top': '-' + height,
- 'opacity': 1
- });
- }else {
- $menu.css({
- 'top': 0,
- 'opacity': 0
- });
- }
- });
-
- });
-
- </script>
- </head>
- <body ontouchstart style="background-color: #f8f8f8;">
- <section class="weui-menu">
- <div class="weui-menu-inner">
- <em></em>
- <span>内测</span>
- <ul>
- <em></em>
- <li>微信</li>
- <li>QQ</li>
- <li>陌陌</li><li>陌陌陌陌陌陌</li>
- </ul>
- </div>
- <div class="weui-menu-inner">
- <em></em>
- <span>公测</span>
- <ul>
- <em></em>
- <li>淘宝</li>
- <li>支付宝</li>
- <li>天猫</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li><li>陌陌陌陌陌陌</li>
- </ul>
- </div>
- <div class="weui-menu-inner">
- <em></em>
- <span>上线测试</span>
- <ul>
- <em></em>
- <li>百度地图</li>
- <li>百度一下</li>
- <li>百度智能</li>
- </ul>
- </div>
-
-
- </section>
- </body>
- </html>
|