Css3 抽屉效果

最新推荐文章于 2024-06-21 09:56:36 发布

weixin_34097242

最新推荐文章于 2024-06-21 09:56:36 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ms_config/archive/2012/09/19/2694042.html

版权

Css3 抽屉效果

演示地址在这里
jq.slidemenu.js 滑动菜单是手机开发框架自主研发的控件之一，定制简单，扩展方便。最常见的向下滑动菜单，类抽屉样的。但控件也提供了对四围的支持，上下左右都可以。这个插件的开发的思路来自于这里!

源码示例如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>carousel demo</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script src="https://dl.dropbox.com/u/20786642/touch.js" type="text/javascript"></script>
        <script src="https://dl.dropbox.com/u/20786642/scripts/jq.slidemenu.js" type="text/javascript"></script>
        <style type="text/css" media="all">
            body {
                overflow : hidden; 
            }
            ul, li, div {
                margin:0;
                padding:0;
                list-style:none;
            }

            #slidedownmenu {
                position:absolute;
                width:100%;
                height:115px;
                left: 0px; 
                z-index:999;
                background:#c05500 url(images/drawer-bg.jpg);
            }

            #slidedownmenu .handle {
                -webkit-user-select:none;
                position:absolute;
                bottom:-28px;
                left:0;
                width:100%;
                height:28px;
                border-top:1px solid #532500;
                border-bottom:1px solid #111;
                background-color:#c3a57e;
                background:url(images/handle.png) no-repeat 50% 50%, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e07b29), color-stop(0.1, #b85300), color-stop(0.8, #793600));
                /*    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.7);*/
            }

            #slidedownmenu ul {
                display:block;
                width:auto;
            }

            #slidedownmenu li {
                display:block;
                float:left;
                margin:20px 10px;
                text-align:center;
                font-weight:bold;
                color:#fff;
                text-shadow:0 1px 1px #000;
            }

            #slidedownmenu li img {
                display:block;
                margin-bottom:4px;
            }
        </style>
    </head>
    <body>
        <div id="slidedownmenu" data-slide-direction="top">
            <ul>
                <li><img src="images/icon1.png" width="59" height="60" alt="">Option 1</li>
                <li><img src="images/icon2.png" width="59" height="60" alt="">Option 2</li>
                <li><img src="images/icon3.png" width="59" height="60" alt="">Option 3</li>
                <li><img src="images/icon4.png" width="59" height="60" alt="">Option 4</li>
            </ul>
            <div class="handle"></div>
        </div>
        <script type="text/javascript" charset="utf-8">
            document.addEventListener('touchmove', function(e) {
                e.preventDefault();
                e.stopPropagation();
            });
            $('#slidedownmenu').slidemenu({
                opened: true
            });
        </script>
    </body>
</html>