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