首页 > 代码库 > 可自定义滑动速度的下滑展开菜单
可自定义滑动速度的下滑展开菜单
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动感滑动下拉菜单</title>
<script type="text/javascript" src="http://www.mamicode.com/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getSpeed(){ return $(‘input[type=radio][name=speed]:checked‘).val(); };
$(‘.item‘).hover(function(){
$(‘.subitem‘, this).show(getSpeed());
}, function(){
$(‘.subitem‘, this).hide(getSpeed());
});
});
</script>
<style type="text/css">
* {padding:0;margin:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:12px;}
html, body {background-color:#2f2f2f;color:#eaeaea;}
img { border:none;}
.center {width:400px;margin-left:auto;margin-right:auto;}
.centerText {text-align:center;}
a { color:#baee00; text-decoration:none;}
a:link { color:#baee00;}
a:visited { color:#baee00;}
a:hover { color:#baee00; text-decoration:underline;}
a:active { color:#baee00;}
.center, .item {width:200px;}
.item, .title {width:auto;padding:4px;background-color:#252525;margin:2px 0 2px 0;}
.subitem {height:40px;line-height:40px;text-align:center;}
ul { list-style-type:none; }
</style>
</head>
<body>
<div class="center">
<div class="title">请选择菜单滑动速度:</div>
<ul>
<li><input name="speed" type="radio" value="http://www.mamicode.com/slow" id="slow" /> <label for="slow">较慢</label></li>
<li><input name="speed" type="radio" value="http://www.mamicode.com/normal" id="normal" checked="checked" /> <label for="normal">一般</label></li>
<li><input name="speed" type="radio" value="http://www.mamicode.com/fast" id="fast" /> <label for="fast">较快</label></li>
</ul>
<div class="item">
01. <a href="http://www.mamicode.com/#" title="+ d‘infos">国际时事</a>
<div class="subitem" style="display:none;">时事新闻内容：- <a href="http://www.mamicode.com/#" title="Care for design">c4d</a></div>
</div>
<div class="item">
02. <a href="http://www.mamicode.com/#" title="+ d‘infos">娱乐新闻</a>
<div class="subitem" style="display:none;">娱乐新闻内容： - <a href="http://www.mamicode.com/#" title="Care for design">c4d</a></div>
</div>
<div class="item">
03. <a href="http://www.mamicode.com/#" title="+ d‘infos">科技资讯</a>
<div class="subitem" style="display:none;">科技资讯内容： - <a href="http://www.mamicode.com/#" title="Care for design">c4d</a></div>
</div>
<div class="item">
04. <a href="http://www.mamicode.com/#" title="+ d‘infos">体育赛事</a>
<div class="subitem" style="display:none;">体育赛事内容： - <a href="http://www.mamicode.com/#" title="Care for design">c4d</a></div>
</div>
<div class="item">
05. <a href="http://www.mamicode.com/#" title="+ d‘infos">汽车时尚</a>
<div class="subitem" style="display:none;">汽车时尚内容： - <a href="http://www.mamicode.com/#" title="Care for design">c4d</a></div>
</div>
</div>
</body>
</html>