可自定义滑动速度的下滑展开菜单
2014-06-25 10:17
246 查看
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动感滑动下拉菜单</title>
<script type="text/javascript" src="/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="slow" id="slow" /> <label for="slow">较慢</label></li>
<li><input name="speed" type="radio" value="normal" id="normal" checked="checked" /> <label for="normal">一般</label></li>
<li><input name="speed" type="radio" value="fast" id="fast" /> <label for="fast">较快</label></li>
</ul>
<div class="item">
01. <a href="#" title="+ d'infos">国际时事</a>
<div class="subitem" style="display:none;">时事新闻内容：- <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
02. <a href="#" title="+ d'infos">娱乐新闻</a>
<div class="subitem" style="display:none;">娱乐新闻内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
03. <a href="#" title="+ d'infos">科技资讯</a>
<div class="subitem" style="display:none;">科技资讯内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
04. <a href="#" title="+ d'infos">体育赛事</a>
<div class="subitem" style="display:none;">体育赛事内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
05. <a href="#" title="+ d'infos">汽车时尚</a>
<div class="subitem" style="display:none;">汽车时尚内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动感滑动下拉菜单</title>
<script type="text/javascript" src="/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="slow" id="slow" /> <label for="slow">较慢</label></li>
<li><input name="speed" type="radio" value="normal" id="normal" checked="checked" /> <label for="normal">一般</label></li>
<li><input name="speed" type="radio" value="fast" id="fast" /> <label for="fast">较快</label></li>
</ul>
<div class="item">
01. <a href="#" title="+ d'infos">国际时事</a>
<div class="subitem" style="display:none;">时事新闻内容：- <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
02. <a href="#" title="+ d'infos">娱乐新闻</a>
<div class="subitem" style="display:none;">娱乐新闻内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
03. <a href="#" title="+ d'infos">科技资讯</a>
<div class="subitem" style="display:none;">科技资讯内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
04. <a href="#" title="+ d'infos">体育赛事</a>
<div class="subitem" style="display:none;">体育赛事内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
<div class="item">
05. <a href="#" title="+ d'infos">汽车时尚</a>
<div class="subitem" style="display:none;">汽车时尚内容： - <a href="#" title="Care for design">c4d</a></div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
- Android自定义横向滑动菜单的实现
- Android自定义View——展开菜单
- 在界面顶部滑动展开的自定义FrameLayout
- Android ViewPager动态向前向后加载数据,自定义viewPager滑动速度
- 自定义 scrollview 标头部分的滑动速度慢(scrollview 子控件滑动速度不一致)
- 点击或滑动view带动画的下滑展开显示隐藏内容的控件
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
- Android群英传——第五章实现滑动的7种方式（六七）ViewDragHelper自定义侧滑菜单
- Android自定义LinearLayout实现左右侧滑菜单，完美兼容ListView、ScrollView、ViewPager等滑动控件
- Android 自定义ViewPager的滑动速度
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
- jquery实现可横向和竖向展开的动态下滑菜单效果
- 通过自定义ViewGroup来实现侧滑菜单效果，解决滑动冲突
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
- 可滑动弹出菜单的自定义Layout，基于ViewGroup
- 自定义菜单收起展开动画（二）
- jquery实现可横向和竖向展开的动态下滑菜单效果
- 自定义可展开的菜单 MenuButtonLayout
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu