jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)


Posted in Javascript onMarch 22, 2013

功能很实用,代码非常的简单

效果1.

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
效果2.

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
样式代码如下:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
margin:0; 
padding:0 
} 
span{ 
color:#FF2B13 
} 
a{ 
text-decoration:none; 
color:#515050 
} 
a:hover{ 
text-decoration:underline; 
color:red 
} 
.box_all{ 
overflow:hidden; 
width:350px; 
font-family:"微软雅黑"; 
font-size:14px; 
border:1px solid #EEEEEE; 
border-top:2px solid #F57A04; 
padding:0 0 10px 0; 
margin:0 auto 
} 
.box{ 
padding-left:45px; 
padding-top:5px 
} 
.box li{ 
line-height:20px; 
margin-right:30px; 
width:120px; 
text-align:left; 
float:left; 
list-style-type:none 
} 
.boxdown{ 
cursor:pointer; 
border:1px solid #EEEEEE; 
width:60px; 
height:14px; 
background:#FFFFFF url(../images/down.png) no-repeat 20px; 
margin-left:150px; 
margin-top:-2px; 
border-top:none; 
margin:0 auto 
} 
.up{ 
cursor:pointer; 
border:1px solid #EEEEEE; 
width:60px; 
height:14px; 
background:#FFFFFF url(../images/up.png) no-repeat 20px; 
margin-left:150px; 
margin-top:-2px; 
border-top:none; 
margin:0 auto 
}

js主要代码如下:
$(document).ready(function(){ 
var a =$(".box ul li:gt(3):not(:last)"); 
a.hide(); 
$(".boxdown").click(function(){ 
if(a.is(':visible')){ 
a.slideUp('fast'); 
$(this).removeClass('up'); 
}else{ 
a.slideDown('fast').show(); 
$(this).addClass('up'); 
} 
}); 
});
Javascript 相关文章推荐
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 #Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 #Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 #Javascript
jquery文字上下滚动的实现方法
Mar 22 #Javascript
JS模块与命名空间的介绍
Mar 22 #Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
You might like
PHP新手上路(十一)
2006/10/09 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Linux内核产生并发的原因
2012/07/13 面试题
学习十八大报告感言
2014/02/28 职场文书
门前三包责任书
2014/04/15 职场文书
社会公德演讲稿
2014/05/20 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
考研复习计划
2015/01/19 职场文书
导游词400字
2015/02/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python获取字符串中的email
2022/03/31 Python